Как добавить MarkerClusterer в Google-карту-реагировать - PullRequest
Новая
       45

Как добавить MarkerClusterer в Google-карту-реагировать

0 голосов
/ 01 ноября 2019

Я хочу реализовать MarkerClusterer в моей карте Google. Есть ли библиотека или компонент, который я могу использовать для того же. Спасибо. Вот так выглядит мой код. Спасибо. 

const handleApiLoaded = ({ map, maps }: MapProps) => {
    console.log(maps);
    mapRef.current = { map, maps };
    if (truckData.length > 0) {
      const bounds = getBounds(maps);
      map.fitBounds(bounds);
      bindResizeListener(map, maps, bounds);
    }
  };


 <GoogleMapReact
      bootstrapURLKeys={{ key: `${process.env.REACT_APP_GOOGLE_MAPS_KEY}` }}
      center={mapCenter}
      defaultZoom={14}
      options={{ zoomControlOptions: { position: 7 } }}
      layerTypes={isTraffic ? ["TrafficLayer"] : []}
      yesIWantToUseGoogleMapApiInternals
      onGoogleApiLoaded={handleApiLoaded}
    >
  </<GoogleMapReact>

interface MapProps {
  map: google.maps.Map;
  maps: {
    LatLngBounds: new () => google.maps.LatLngBounds;
  };

Как использовать кластеризацию маркеров с библиотекой google-map-реагировать. Спасибо

Ответы [ 2 ]

1 голос
/ 10 ноября 2019

Я решил проблему кластеризации здесь https://github.com/google-map-react/google-map-react/issues/473

import React, {Component} from 'react'
import GoogleMapReact from 'google-map-react'
import MarkerClusterer from '@google/markerclusterer'

export default class GoogleMapContainer extends Component {
  componentDidMount () {
    const script = document.createElement('script')
    script.src = 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js'
    script.async = true
    document.body.appendChild(script)
  }

  setGoogleMapRef (map, maps) {
    this.googleMapRef = map
    this.googleRef = maps
    let locations = [
      {lat: -31.563910, lng: 147.154312},
      {lat: -33.718234, lng: 150.363181},
      {lat: -33.727111, lng: 150.371124}]
    let markers = locations && locations.map((location) => {
      return new this.googleRef.Marker({position: location})
    })
    let markerCluster = new MarkerClusterer(map, markers, {
      imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m',
      gridSize: 10,
      minimumClusterSize: 2
    })
  }

  static defaultProps = {
    center: {
      lat: 59.95,
      lng: 30.33
    },
    zoom: 11
  }

  render () {
    return (
      <GoogleMapReact
        bootstrapURLKeys={{key: `PLACE_HOLDER`}}
        yesIWantToUseGoogleMapApiInternals
        onGoogleApiLoaded={({map, maps}) => this.setGoogleMapRef(map, maps)}
        defaultCenter={{lat: -31.563910, lng: 147.154312}}
        defaultZoom={15}
        options={{streetViewControl: true}}
      />
    )
  }
}

введите описание изображения здесь

0 голосов
/ 14 ноября 2019 
const setGoogleMapRef = ({ map, maps }: MapProps) => {
    mapRef.current = { map, maps };
    const markers =
      truckData &&
      truckData.map(data => {
        const lat = data.coords.coordinates[0];
        const lng = data.coords.coordinates[1];
        const location = { lat, lng };
        return new maps.Marker({ position: location });
      });
    const markerCluster = new MarkerClusterer(map, markers, {
      imagePath: "img/m1",
      gridSize: 30,
      minimumClusterSize: 5,
    });
  };

  useEffect(() => {
    if (mapRef.current) {
      const { map, maps } = mapRef.current;
    }
  }, [mapRef]);

  return (
    <GoogleMapReact
      bootstrapURLKeys={{ key: `${process.env.REACT_APP_GOOGLE_MAPS_KEY}` }}
      center={mapCenter}
      defaultZoom={14}
      options={{ zoomControlOptions: { position: 7 } }}
      layerTypes={isTraffic ? ["TrafficLayer"] : []}
      yesIWantToUseGoogleMapApiInternals
      onGoogleApiLoaded={setGoogleMapRef}
    >

Мне пришлось добавить useEffect для mapRef. Я не смог использовать изображения, предоставленные библиотекой https://github.com/googlemaps/v3-utility-library/tree/master/markerclusterer/images, поэтому я добавил изображения в папку public / img. Спасибо.

...