6

próbuję ukryć/pokazać markerClusterer gdy użytkownik kliknie kilka przycisków:Jak ukryć i pokazać MarkerClusterer w google maps

Oto, co usiłuję zrobić:

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]); 
    } 

tworzę multiple markerClusterer każdy z nich jest powiązany z określoną nazwą.

Więc mam kilka przycisków powiązanych z tą konkretną nazwą i muszę ukryć/pokazać klaster znacznika skojarzony z tym przyciskiem.

/*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 
} 

Zrobiłem wiele testów, ale nikt nie spełnia mojej prośby. Czy ktoś może mi pomóc? Dzięki!

+0

Trzeba ukryć/pokazać znaczniki z pewnym categorie albo trzeba 'unclusterer' it? –

+0

Muszę tylko ukryć/pokazać klaster z kategorią klikniętą przez skojarzony z nim przycisk – JackTurky

Odpowiedz

16

mam zmaga się cały ranek z tego, ale na szczęście dostałem się do rozwiązania.

Przede wszystkim upewnij się, że masz najnowszą wersję MarkerClustererPlus https://github.com/googlemaps/js-marker-clusterer

to jest bardzo proste,

Podczas tworzenia znaczników upewnij się

ustawić jego widoczną flagę na false .

I podczas tworzenia clusterer markera zrobić to w ten sposób:

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

jeśli chcesz pokazać clusterer po prostu to zrobić:

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

markerCluster.repaint(); 

ukryć klastra:

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

markerCluster.repaint(); 

Mam nadzieję, że to pomaga, pozdrawiam

+0

bardzo proste rozwiązanie! Dziękuję bardzo! :) – JackTurky

+0

jesteś bardzo mile widziany! możesz dodać te algorytmy do łańcucha prototypów urządzenia do zaznaczania znaczników jako metody pokazywania/ukrywania dla mnie to też trochę bardziej czyste – nicoabie

1

Można, na przykład:

  1. Zdefiniuj teleskopowe click for przycisków;
  2. Użycie funkcji getMarkers(), aby uzyskać wszystkie znaczniki i zapisać wyniki w zmiennej (var allMarkers = getMarkers());
  3. Utwórz kolejną zmienną, aby dodać/usunąć znaczniki (var currentMarkers = allMarkers);
  4. Po kliknięciu każdego przycisku można zapętlić zmienną currentMarkers i użyć funkcji removeMarker (MARKER_TO_REMOVE) lub addMarker (MARKER_TO_ADD, true) (true to ponowne rysowanie mapy);
  5. Po zapętleniu znaczników można uzyskać dostęp do ich informacji (wykonaj konsolę.log (znacznik), aby zobaczyć, o czym mówię);

Więcej informacji można znaleźć w dokumentacji tutaj: https://googlemaps.github.io/js-marker-clusterer/docs/reference.html

+0

Podoba mi się twoje rozwiązanie ... tworzę globalną tablicę asocjacyjną: każdy klucz jest kategorią, a każda wartość jest tablicą znacznika. Tak więc kliknij przycisk I wykonaj: function showMaps (name, visible) { \t var tmp_cluster = clustersContainer [nazwa]; \t if (widoczny) { \t tmp_cluster.addMarkers (mapa, globalMarkers [nazwa], prawda); \t} else { \t tmp_cluster.removeMarkers (mapa, globalMarkers [nazwa], prawda); \t} ale niestety nie chce tego pokazać .. – JackTurky

+0

Czy próbowałeś wywołać funkcję przerysowywania() na końcu? –

0

Mam tę samą sprawę i tak to robię ...nadzieję, że pomoże

instanciate klaster

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

ukryć klastry:

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

pokazać klastrów:

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

o to jsfiddle link, aby przetestować http://jsfiddle.net/3s6qfzcy/