typescript - 如何将 MarkerClusterer 添加到 google-map-react

Question

我想在我的谷歌地图中实现 MarkerClusterer。有没有我可以使用的库或组件。谢谢你。这就是我的代码现在的样子。谢谢你。

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-react 库一起使用。谢谢

Answer 1

我在这里解决了集群问题 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}}
      />
    )
  }
}

在此处输入图像描述

Answer 2

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}
    >

我必须为 mapRef 添加一个 useEffect。我无法使用库https://github.com/googlemaps/v3-utility-library/tree/master/markerclusterer/images提供的图像，因此我已将图像添加到 public/img 文件夹。谢谢你。

Answer 3

import GoogleMap from "google-map-react";
import { MarkerClusterer } from "@googlemaps/markerclusterer";
import React from "react";

const handleApiLoaded = (map, maps) => {
  const markers = [];
  const infoWindows = [];

  const locations = [
    { lat: -31.56391, lng: 147.154312 },
    { lat: -33.718234, lng: 150.363181 },
    { lat: -33.727111, lng: 150.371124 },
  ];

  locations.forEach((location) => {
    markers.push(
      new maps.Marker({
        position: {
          lat: location.lat,
          lng: location.lng,
        },
        map,
      })
    );
  });

  new MarkerClusterer({ markers, map });
};
//Google Map React
function GoogleMapDemo() {
  return (
    <GoogleMap
      defaultCenter={{ lat: -31.56391, lng: 147.154312 }}
      defaultZoom={15}
      bootstrapURLKeys={{ key: "keyCode" }}
      yesIWantToUseGoogleMapApiInternals
      onGoogleApiLoaded={({ map, maps }) => {
        handleApiLoaded(map, maps);
      }}
      options={{ streetViewControl: true }}
    />
  );
}

export default GoogleMapDemo;