如何隐藏和在谷歌地图显示MarkerClusterer(How to hide and show M

2019-07-19 23:09发布

我试图隐藏/显示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
}

我已经做了很多的测试,但没有一个满足我的要求。 有人能帮我吗? 谢谢!

Answer 1:

我已经整个上午与此挣扎幸好我得到了一个解决方案。

首先,请确保您有最新版本MarkerClustererPlus https://github.com/googlemaps/js-marker-clusterer

那么它是很容易的,

当创建标记确保您

它的可视标志设置为false。

和创建标记聚类器的时候做这种方式:

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();

希望它能帮助,问候



Answer 2:

你可以,例如:

  1. 定义的按钮单击处理;
  2. 使用功能getMarkers()来获取所有标记,并将结果保存到一个变量(VAR allMarkers = getMarkers());
  3. 创建另一个变量来添加/删除标记(VAR currentMarkers = allMarkers);
  4. 当在每个按钮可以循环的currentMarkers可变点击和使用的功能removeMarker(MARKER_TO_REMOVE)或addMarker(MARKER_TO_ADD,真)(真正是重绘地图);
  5. 当你循环的标记,你可以访问他们的信息(做的console.log(标记),看看我说的);

:欲了解更多信息,你可以在这里看到的文档https://googlemaps.github.io/js-marker-clusterer/docs/reference.html



Answer 3:

我有同样的情况,这是我要做的事......希望它有助于

集群实例化

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/



文章来源: How to hide and show MarkerClusterer in google maps