Come nascondere e mostrare MarkerClusterer in Google Maps

Question

sto cercando di nascondere/mostrare markerClusterer quando l'utente fa clic alcuni pulsanti:

Qui è quello che sto cercando di fare:

map = new google.maps.Map(document.getElementById("mappa"),mapOptions); 
    var marker_tmp = []; 
    var markers_tmp = []; 
    $.each(json,function(index,value){ 
     var latLng = new google.maps.LatLng(value.lat,value.lng); 
     var marker = new google.maps.Marker({'position': latLng}); 
     if((value.candidato in markers_tmp)==false){ 
      markers_tmp[value.name]=[]; 
     } 
     markers_tmp[value.name].push(marker); 
    }); 
    for(var name in markers_tmp){ 
     markers[name]= new MarkerClusterer(map,markers_tmp[name]); 
    } 

creo multiple markerClusterer a ciascuno è associato un nome particolare.

Quindi ho alcuni pulsanti associati a questo particolare nome e ho bisogno di nascondere/mostrare il clusterer di marker associato a quel pulsante.

/*This is the function associated to a button when it is clicked*/ 
function hide_show_cluster(name,visible){ 
    var tmp_cluster = markers[name]; 
    //call a function of markerClusterer (tmp_cluster) to hide/show it 
} 

Ho fatto molti test ma nessuno soddisfa la mia richiesta. Qualcuno può aiutarmi? Grazie!

Answer 1

ho lottato tutta la mattina con questo, ma per fortuna ho avuto modo di una soluzione.

Prima di tutto, assicuratevi di avere l'ultima versione MarkerClustererPlus https://github.com/googlemaps/js-marker-clusterer

allora è molto facile,

Quando si creano i marcatori assicuratevi di

impostare la sua bandiera visibile su false .

E quando si crea il clusterer marcatore fare in questo modo:

new MarkerClusterer(map, markers, { ignoreHidden: true }); 

se si desidera visualizzare il clusterer solo fare questo:

for (var it in markers) { 
    markers[it].setVisible(true); 
} 

markerCluster.repaint(); 

per nascondere i cluster:

for (var it in markers) { 
    markers[it].setVisible(false); 
} 

markerCluster.repaint(); 

Spero che aiuti, per quanto riguarda

Answer 2

È possibile, ad esempio:

1. Definire i gestori clic per i pulsanti;
2. Utilizzando la funzione getMarkers() per ottenere tutti i marcatori e salvare i risultati in una variabile (var allMarkers = getMarkers());
3. Creare un'altra variabile per aggiungere/rimuovere indicatori (var currentMarkers = allMarkers);
4. Quando si fa clic su ciascun pulsante, è possibile eseguire il ciclo della variabile currentMarkers e utilizzare le funzioni removeMarker (MARKER_TO_REMOVE) o addMarker (MARKER_TO_ADD, true) (il vero è ridisegnare la mappa);
5. Quando si eseguono il loop dei marker è possibile accedere alle informazioni (fare un console.log (marker) per vedere di cosa sto parlando);

Per ulteriori informazioni si può consultare la documentazione qui: https://googlemaps.github.io/js-marker-clusterer/docs/reference.html

Answer 3

Ho lo stesso caso e questo è come lo faccio ...Spero che aiuta

grappolo instanciate

let markerCluster = new MarkerClusterer(map, markers, { 
    imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'}); 

per nascondere i cluster:

function hideMarkers() { 
    for (let i in markers) { 
     markers[i].setMap(null); 
    } 
    markerCluster.clearMarkers(); 
} 

per mostrare i cluster:

function showMarkers() { 
    for (let i in markers) { 
     markers[i].setMap(map); 
    } 
    markerCluster.addMarkers(markers); 
} 

Ecco un link per testare jsfiddle http://jsfiddle.net/3s6qfzcy/