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 方法,为它提供地图道具。