Google Maps Marts Marker Clusterer показывает точку вместо количества маркеров внутри кластера с помощью NextJs ⇐ Javascript

[Anonymous]

Я пытаюсь сделать карту с какой -то POI, и все работает нормально, за исключением случаев, когда я хочу добавить кластер -маркеры. На самом деле, я вижу кластер и взаимодействую с ним, но вместо того, чтобы показывать количество производителей внутри кластера, он просто показывает точку ... изображение моего текущего веб -приложения. Поэтому я попытался изменить код в учебном пособии по Google Maps (https://developers.google.com/codelabs/ ... react-js#0), но я мог допустить ошибку ...
Также мой код:
​​.import {
APIProvider,
Map,
AdvancedMarker,
Pin,
useMap,
} from "@vis.gl/react-google-maps";
import { MarkerClusterer, ClusterIconStyle } from "@googlemaps/markerclusterer";

export default function MapInterface({ setTableView }) {
//------------- POLYGONS DATA -------------
const encode = require("geojson-polyline").encode;
const regSimpData = regSimp.features;
const encodedRegSimp = regSimpData.map((reg) => encode(reg.geometry));

const tableButtonClickHandler = () => {
setTableView(true);
};

//------------- DATA -------------

const initialData = [
{ key: "operaHouse", location: { lat: -33.8567844, lng: 151.213108 } },
{ key: "tarongaZoo", location: { lat: -33.8472767, lng: 151.2188164 } },
{ key: "manlyBeach", location: { lat: -33.8209738, lng: 151.2563253 } },
{ key: "hyderPark", location: { lat: -33.8690081, lng: 151.2052393 } },
{ key: "theRocks", location: { lat: -33.8587568, lng: 151.2058246 } },
{ key: "circularQuay", location: { lat: -33.858761, lng: 151.2055688 } },
{ key: "harbourBridge", location: { lat: -33.852228, lng: 151.2038374 } },
{ key: "kingsCross", location: { lat: -33.8737375, lng: 151.222569 } },
{ key: "botanicGardens", location: { lat: -33.864167, lng: 151.216387 } },
{ key: "museumOfSydney", location: { lat: -33.8636005, lng: 151.2092542 } },
{ key: "maritimeMuseum", location: { lat: -33.869395, lng: 151.198648 } },
{
key: "kingStreetWharf",
location: { lat: -33.8665445, lng: 151.1989808 },
},
{ key: "aquarium", location: { lat: -33.869627, lng: 151.202146 } },
{ key: "darlingHarbour", location: { lat: -33.87488, lng: 151.1987113 } },
{ key: "barangaroo", location: { lat: -33.8605523, lng: 151.1972205 } },
];

//------------- MARKERS -------------
const BordeauxMarkers = ({ pois }) => {
const map = useMap();
const [markers, setMarkers] = useState({});
const clusterer = useRef(null);

// Initialize MarkerClusterer, if the map has changed
useEffect(() => {
if (!map) return;
if (!clusterer.current) {
clusterer.current = new MarkerClusterer({
map: map,
});
}
}, [map]);

// Update markers, if the markers array has changed
useEffect(() => {
if (!clusterer.current) return;
clusterer.current.clearMarkers();
clusterer.current.addMarkers(Object.values(markers));
}, [markers]);

const setMarkerRef = (marker, key) => {
if (marker && markers[key]) return;
if (!marker && !markers[key]) return;

setMarkers((prev) => {
if (marker) {
return { ...prev, [key]: marker };
} else {
const newMarkers = { ...prev };
delete newMarkers[key];
return newMarkers;
}
});
};

console.log(markers);

return (

{pois.map((poi) => (
setMarkerRef(marker, poi.key)}
>
background={"#FBBC04"}
glyphColor={"#000"}
borderColor={"#000"}
/>

))}

);
};

//------------- CLUSTERS -------------

return (



console.log("Maps API has loaded.")}
>

console.log(
"camera changed:",
ev.detail.center,
"zoom:",
ev.detail.zoom
)
}
>





















Table


Map





);
}
< /code>
Я на самом деле не знаю, что случилось, потому что мой код кажется таким же, как и в учебном пособии, кроме как в JS. Я пытался изменить рендерин, но это ничего не изменило, и я смотрел другие учебники, но это мне не помогло. Кроме того, я действительно не понял, как работает реферат в компоненте AdvancedMarker ...
>

Подробнее здесь: https://stackoverflow.com/questions/795 ... markers-in