Как скрыть и показать MarkerClusterer в Google maps

Я пытаюсь скрыть/показать markerClusterer, когда пользователь нажимает некоторые кнопки:

вот что я пытаюсь сделать:

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

Я создаю несколько markerClusterer каждый из них связан с определенным именем.

поэтому у меня есть некоторые кнопки, связанные с этим конкретным именем, и мне нужно Скрыть/показать кластеризатор маркеров, связанный с этой кнопкой.

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

Я сделал много тестов, но никто не удовлетворил мой запрос. Кто-нибудь может мне помочь? Спасибо!

6
google-maps-markers javascript markerclusterer show-hide

3 ответов

я боролся с этим все утро, но, к счастью, я нашел решение.

прежде всего, убедитесь, что у вас есть последняя версия MarkerClustererPlushttps://github.com/googlemaps/js-marker-clusterer

тогда это очень легко,

при создании маркеров убедитесь, что вы

установите его видимый флаг в false.

и при создании маркер clusterer сделать это путь:

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

Если вы хотите показать кластеризатор, просто сделайте это:

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

markerCluster.repaint();

чтобы скрыть кластера:

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

markerCluster.repaint();

надеюсь, это поможет, с уважением

16

вы можете, например:

  1. определите обработчики щелчков для кнопок;
  2. используя функцию getMarkers (), чтобы получить все маркеры и сохранить результаты в переменной (var allMarkers = getMarkers ());
  3. создайте другую переменную для добавления / удаления маркеров (var currentMarkers = allMarkers);
  4. при нажатии каждой кнопки вы можете зациклить переменную currentMarkers и использовать функции removeMarker (MARKER_TO_REMOVE) или addMarker(MARKER_TO_ADD, правда) (правда перекроить карту);
  5. когда вы зацикливаете маркеры, вы можете получить доступ к их информации (сделайте консоль.журнал(маркер), чтобы увидеть, о чем я говорю);

более подробную информацию можно посмотреть здесь документация: https://googlemaps.github.io/js-marker-clusterer/docs/reference.html

1

у меня тот же случай, и вот как я это делаю... надеюсь, это поможет

instanciate кластера

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

чтобы скрыть кластеров:

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

показать кластеров:

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

вот ссылка jsfiddle для тестирования http://jsfiddle.net/3s6qfzcy/

0