1
import MarkerClusterer from "@google/markerclusterer";

  const [markerClusterer1, setMarkerClusterer1] = useState<MarkerClusterer>();

  const handleApiLoaded = ({ map, maps }: Mapprops) => {
    mapRef.current = { map, maps };
    createMarker(mapRef.current);
  };

  const createMarker = ({ map, maps }: Mapprops) => {
    if (markerClusterer1) {
      markerClusterer1.clearMarkers();
    }
    const markers = fakedata.map(data => {
      const [lat, lng] = data.coords.coordinates;
      const marker = { lat, lng };
      return new maps.Marker({ position: marker });
    });
    const markerClusterer2 = new MarkerClusterer(map, markers, {
      imagePath: "img/m",
      gridSize: 0,
    });
    setMarkerClusterer1(markerClusterer2);
  };

  useEffect(() => {
    if (mapRef.current) {
       createMarker(mapRef.current);
      }
    }
  }, [mapRef]);

   interface Mapprops {
      map: google.maps.Map;
      maps: {
        Marker: new () => google.maps.Marker;
      };

集群是突然的,第一次登陆页面时它不起作用,但可以刷新和放大和缩小。非常感谢任何帮助。

onGoogleApiLoaded= 调用 handleApiLoaded 方法,为它提供地图道具。

4

0 回答 0