Markerclusterer imposta l’icona del cluster di marker in base ai marker al suo interno

Diciamo che voglio fare una pagina web che mostrerà il numero approssimativo di posti di parcheggio liberi lasciati su ogni parcheggio (a causa della riservatezza non sono autorizzato a fornire dettagli su ciò che sto facendo effettivamente). Per questo sto usando Google maps e Markerclusterer . Quindi per parcheggiare con meno del 5% di punti rimasti mi piacerebbe mostrare un indicatore rosso, per i parcheggi con il 5% -25% di punti mostrerei uno giallo e per quelli con più del 25% di spot gratuiti che voglio fare è verde. Finora ho potuto creare questi indicatori e raggrupparli, ma ecco la parte difficile (e la domanda stessa):

Come posso rendere l’icona di un cluster dipendente dagli indicatori al suo interno?

Per esempio:

  • Il parcheggio A è verde
  • Il parcheggio B è rosso
  • Il parcheggio C è verde
  • Il parcheggio D è giallo

Quando si esegue lo zoom indietro, voglio mostrare il cluster che ne ha tutti e 4 (il peggiore di tutti). Quando ingrandito otterrei 2 cluster (A + B e C + D). Voglio che il primo cluster (A + B) sia rosso e il secondo (C + D) sia giallo.

Quello che ho fatto finora:

var mcOptions = {gridSize: 50, maxZoom: 15, styles: [{ height: 46, url: "///Users/Novarg/Downloads/foundation-5.4.7/img/greenC.png", width: 46 }, { height: 46, url: "///Users/Novarg/Downloads/foundation-5.4.7/img/redC.png", width: 46 }]}; var markers = []; for (var i = 0; i < 100; i++) { var latLng = new google.maps.LatLng(51 + Math.random(), 4 + Math.random()); var marker = new google.maps.Marker({'position': latLng, icon: 'img/greenP.png'}); markers.push(marker); } for (var i = 0; i < 20; i++) { var latLng = new google.maps.LatLng(51 - Math.random(), 4 - Math.random()); var marker = new google.maps.Marker({'position': latLng, icon: 'img/redP.png'}); markers.push(marker); } var markerCluster = new MarkerClusterer(map, markers, mcOptions); } google.maps.event.addDomListener(window, 'load', initialize); 

In questo momento ho solo marcatori rossi e verdi, che dovrebbero essere sufficienti per testarlo. Ma il comportamento di questo cluster ora è il seguente:

  • Tutti i cluster con meno di 10 marcatori sono verdi
  • Tutti i cluster con più di 9 marcatori sono rossi

MODIFICARE

Da questo link ho scoperto che quello di cui potrei aver bisogno è Calcolatrice . Così ho provato, ma ancora senza fortuna (anche se penso che mi sto avvicinando, in realtà spero di essere molto vicino alla soluzione in questo momento).

Così ho provato a cambiare le mie opzioni:

 var mcOptions = {gridSize: 50, maxZoom: 15, styles: [{ height: 46, url: "///Users/Novarg/Downloads/foundation-5.4.7/img/greenC.png", width: 46 }, { height: 46, url: "///Users/Novarg/Downloads/foundation-5.4.7/img/redC.png", width: 46 }], calculator: function(markers, numStyles) { for (var i = 0; i  -1) { return {text: markers.length, index: 1}; } } return {text: markers.length, index: 0}; } }; 

Ma il calcolatore non viene mai utilizzato. L’ho provato mettendo un semplice alert('test'); dentro.

Spero che queste informazioni aggiuntive ti aiuteranno ad aiutarmi a trovare una soluzione.

Come ho già detto nella modifica, ero molto vicino alla soluzione. Così ho preso un altro (fresco) sguardo al codice oggi, ho controllato i documenti ancora una volta e ho notato quanto segue in ClusterIconInfo :

numero indice L’ indice più 1 dell’elemento nell’array stili da utilizzare per definire l’icona del cluster.

Quindi, in pratica, ho risolto questo problema semplicemente incrementando l’ indice di uno (e ho anche spostato Calcolatrice in modo che fosse una var e poi usato il metodo setCalculator () sullo stesso MarkerClusterer ). Quindi il mio codice è diventato:

 var calc = function(markers, numStyles) { for (var i = 0; i < markers.length; i++) { if (markers[i].getIcon().indexOf("redP") > -1) { return {text: markers.length, index: 2}; } } return {text: markers.length, index: 1}; } var mcOptions = {gridSize: 50, maxZoom: 15, styles: [{ height: 46, url: "img/greenC.png", width: 46 }, { height: 46, url: "img/redC.png", width: 46 }] }; var markerCluster = new MarkerClusterer(map, markers, mcOptions); markerCluster.setCalculator(calc); 

E ora funziona come un fascino (come dovrebbe).

Speriamo che questo possa aiutare qualcuno un giorno.