Google Maps Api v3 - 如何删除群集图标?

时间:2010-11-22 20:22:10

标签: google-maps-api-3 google-maps-markers markerclusterer

如何从地图中删除所有群集图标(群集标记)?尝试过像:

这样的建议

Google Maps API v3: How to remove all markers?

......但它没有用。

你可以帮助我实现这个目标吗?

提前谢谢你!

更新(2010-11-23)

标记用

存储在数组中
var markersClust = Array();

...并添加(与php结合):

markersClust.push(marker_<?php echo $team["Team"]["id"]; ?>);

var markerClusterer = new MarkerClusterer(MyMap.map, markersClust, clusterOptions);

它工作正常。

但是,我无法将它们从地图中移除,它驱使我......

尝试用

删除标记(我做了)
for ( var i=0; i < markersClust.length; i++) {
    markersClust[i].setMap(null);
}
markersClust = []; 

但群集图标在地图上是静止的。

我也尝试过这样的事情:

markerClusterer.clearMarkers();

并且喜欢

MyMap.preventDefault();
MyMap.stopPropagation();
MyMap.clearMarkers();

但是,在地图上,群集的图标仍然存在。

我还需要做些什么来从地图中删除这些群集图标?请帮忙......

5 个答案:

答案 0 :(得分:40)

这是正确的方法:

// Unset all markers
var i = 0, l = markers.length;
for (i; i<l; i++) {
    markers[i].setMap(null)
}
markers = [];

// Clears all clusters and markers from the clusterer.
markerClusterer.clearMarkers();

演示:http://jsfiddle.net/HoffZ/gEzxx/

文档:https://googlemaps.github.io/js-marker-clusterer/docs/reference.html

答案 1 :(得分:2)

我也有同样的问题。我通过在初始化期间仅声明一次MarkerClusterer来修复它:

markerCluster = new MarkerClusterer(map);

答案 2 :(得分:0)

迭代每个标记并将该标记的地图设置为null。这将从地图中删除标记。

答案 3 :(得分:0)

这就是我的工作。我有很多标记,但当我切换到热图时,我想删除所有标记和clusterer。当我创建标记时,我将其添加到全局标记数组

 markers.push(marker);

我像这样定义了clustere

markerCluster = new MarkerClusterer(map, markers);
markerCluster.setIgnoreHidden(true);

当我点击按钮显示热图

$.each(markers, function(k, v){
    v.setVisible(false);
});
markerCluster.repaint();

当忽略隐藏时调用repaint()时,它会隐藏所有群集图标。

答案 4 :(得分:0)

建立并扩展ITT中的一些答案:

clustermarkerplus的示例通常显示如果将其初始化为整个页面加载的一部分时如何使用它。

如果您在单页应用程序中使用库,并且在范围更改时刷新标记,则声明New MarkerClusterer(map)不仅会导致群集持续存在,而且某些标记也可能会持续存在,大概是因为该库除了处理实际的群集图标之外,还优化了标记显示。

因此,在页面初始化期间,您应该创建一个MarkerClusterer对象。然后,在更新期间,您应该执行单个标记为空的行为,但还要,清除MarkerClusterer对象。

在构建new google.maps.Map()并设置选项并创建全局变量mapSet['facilityMarkerCluster']之后调用的示例函数:

const clusterFacilityMarkers = function () {
  const clusterOptions = {
    imagePath: "/static/js/dependencies/markerclustererplus/img/m",
    gridSize: 75,
    zoomOnClick: true,
    maxZoom: 8,
  };

  mapSet['facilityMarkerCluster'] = new MarkerClusterer(mapSet['map'], [], clusterOptions);
};

请注意,声明使用的标记数组为空,因为假定您添加标记的标记更新例程将在此之后运行,即使重新加载整个页面也是如此。

在此更新例程中,在地图的“添加标记”部分期间(可在边界更改时以及在正确清除各个标记后运行):

const addFacilityMarkers = function (resolve) {

// For loop over creation of your updated set of markers
            createFacilityMarker(facilitiesJson[key]);

// Update marker clusters

        // Clear the markercluster objects
        mapSet['facilityMarkerCluster'].clearMarkers();
        // Then add your array of markers to the markercluster object
                mapSet['facilityMarkerCluster'].addMarkers(mapSet['facilityMarkers']);
};