La documentación de esta utilidad no tiene sentido para mí. De acuerdo con this y this , puede personalizar los íconos del clúster convirtiendo primero el ícono del clúster en un marcador a través de la propiedad de renderer de MarkerClusterer y luego aplicar estilos de ícono como lo haría con un marcador normal. Sin embargo, un new google.maps.Marker requiere una propiedad de position para funcionar, una "propiedad a la que no tengo acceso". Tengo acceso a las posiciones individuales de las ubicaciones de los marcadores individuales, pero el objetivo principal de usar la funcionalidad de agrupación de marcadores es que calcula un punto medio para usted.
¿Cómo puedo representar el clúster en la posición correcta, si no conozco la posición? Puedo acceder a una propiedad _position en el accesorio de stats , pero eso genera un error:
Cannot read properties of undefined (reading 'addListener')
Realmente no sé qué hacer aquí, porque no parece haber muchos ejemplos confiables por ahí. Por lo que puedo decir, estoy siguiendo el ejemplo establecido en su github .
private createClusteredMarkerMap() { new this._GoogleMaps.load((google) => { let map = new google.maps.Map(this._map, mapOptions); const markers = this._locations.map(({ lat, long }) => { // loop and extract lat/lng }); new markerClusterer.MarkerClusterer({ map, markers, renderer: { render: (clusters, stats) => {this.testRenderer(clusters, stats)} // trying to edit the icons here } }); }); } private testRenderer(clusters, stats) { const svg = // create svg here return new google.maps.Marker({ // position is required here but I don't have that value icon: { url: `data:image/svg+xml;base64,${svg}`, scaledSize: new google.maps.Size(45, 45), }, label: { text: String(stats.count), color: "rgba(255,255,255,0.9)", fontSize: "12px", }, }); }const renderer = { render({ count, position }) { return new google.maps.Marker({ label: { text: String(count), color: "white", fontSize: "12px" }, position, icon: "url to the file", // adjust zIndex to be above other markers zIndex: Number(google.maps.Marker.MAX_ZINDEX) + count, }) } } // pass your function to the markerCluster constructor const cluster = new MarkerClusterer({map, markers, renderer})Falta una declaración de return en el método de render . High Fives todo el año.