如何在谷歌地图中隐藏和显示MarkerClusterer

Question

我正在尝试在用户点击某些按钮时隐藏/显示标记聚合器：

这是我想要做的：

    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
}

我已经做了很多测试，但没有一个满足我的要求。有人可以帮帮我吗？谢谢！

- Jayyrus

---

你需要根据某些分类来隐藏/显示标记，还是需要“取消聚类”？ - red_alert

我只需要通过与之关联的按钮点击来隐藏/显示类别聚类。 - Jayyrus

Answer 1

今早我花了整个上午在这个问题上苦苦挣扎，但幸运的是，我找到了解决方案。

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

然后很简单，

创建标记时，请确保将其可见标志设置为false。

创建标记聚合器时，请按以下方式进行：

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

如果你想显示clusterer，只需要执行以下操作：

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

markerCluster.repaint();

隐藏集群：

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

markerCluster.repaint();

希望能对你有所帮助，敬礼

- nicoabie

---

只是提供信息...在最新的MarkerClusterer版本1.2.0中，该参数被称为：“ignoreHiddenMarkers”。 - hasentopf

它可以工作，但是集群数量计数器不会更新，因此地图有点混乱。 - Pons

在 markerclusterer.js 的 359 行后添加以下代码：for (var i=0; i<markers.length; i++) { if( markers[i].visible == false ) count--; }，即可解决问题。 - Pons

这样不行，你需要循环遍历 ´markerCluster´ 内的 ´markers_´ 数组，并将每个可见性设置为 false。 - showtime

Answer 2

我有同样的情况，以下是我处理的方式...希望对你有所帮助

集群实例化

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/

。

- Abdul Manaf Saparuddin

Answer 3

你可以：

1. 定义按钮的点击处理程序;
2. 使用函数getMarkers()获取所有标记并将结果保存到变量中（var allMarkers = getMarkers()）;
3. 创建另一个变量以添加/删除标记（var currentMarkers = allMarkers）;
4. 当单击每个按钮时，您可以循环currentMarkers变量并使用函数removeMarker（MARKER_TO_REMOVE）或addMarker（MARKER_TO_ADD，true）（true是重新绘制地图）;
5. 在循环标记时，您可以访问它们的信息（执行console.log(marker)以查看我正在谈论什么）;

有关更多信息，请参见此处的文档：https://googlemaps.github.io/js-marker-clusterer/docs/reference.html

- red_alert

---

我喜欢你的解决方案... 我创建了一个全局关联数组：每个键是一个类别，每个值是标记数组。所以在按钮点击时我做了以下操作：function showMaps(name,visible){ var tmp_cluster = clustersContainer[name]; if(visible){ tmp_cluster.addMarkers(map,globalMarkers[name],true); }else{ tmp_cluster.removeMarkers(map,globalMarkers[name],true); } 但不幸的是它不想显示出来... - Jayyrus