从数组中移除标记后更新标记聚合。

Question

我目前正在使用jquery ui maps插件中的markercluster插件。

我有两个数组，一个是所有标记点的数组（称为markers），另一个是符合搜索条件的标记点的数组（称为current_markers）。这些标记点从第一个数组中过滤出来。

然后我在屏幕上绘制current_markers。

然而我发现markerclusterer库没有基于这个更改进行更新。

那么我该如何更新markerclusterer？

是否可以将markerclusterer分配给一个变量，并调用更新函数？

- jaget

Answer 1

可以的。

创建地图

假设您已经创建了MarkerClusterer对象，类似于这样：

var center = new google.maps.LatLng(10, 20);
var map = new google.maps.Map(document.getElementById('map'), { zoom: 6, center: center, mapTypeId: google.maps.MapTypeId.ROADMAP });
var markerClusterer = new MarkerClusterer(map);

添加标记

您可以像这样向其添加多个标记：

var markers = []
var marker = new google.maps.Marker({position: center});
markers.push(marker);
markerClusterer.addMarkers(markers);

请注意，这里我只添加了一个。

移除所有标记

然后，您可以使用clearMarkers来清除所有标记，就像这样：

markerClusterer.clearMarkers();
markers = [];

请注意，出于整洁的考虑，在此我还取消了标记数组。

文档

有关所有可用方法的完整文档，请参见此处：

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

更新后的链接：https://googlemaps.github.io/js-markerclustererplus/classes/markerclusterer.html#clearmarkers

这是一个明智且相对完整的API。

- superluminary

---

回答非常好，因为您不仅回应了提问者的问题，还展示了与聚类器构建无关的标记管理的完整过程。 - hubson bropa

谢谢@hubsonbropa，你的话真是太好听了。 - superluminary

链接已失效，很难找到最新的信息，这绝对有所帮助！ - SvennD

感谢您。markerClusterer.clearMarkers(); 是更好的选择。 - Pullat Junaid

Answer 2

您应该将标记对象存储在变量中，然后按照以下方式取消地图：

var markerCluster = new MarkerClusterer(map, markers);
/// ... later on
markerCluster.setMap(null);

完成此操作后，您可以使用新标记初始化new MarkerClusterer

更新

如果您正在使用Google Maps UI插件，则需要额外的代码。我已在类名为reset_markercluster的按钮上添加了单击事件，这只是为了展示如何使用它来调用地图。

var _map, _markerCluster;

$(function() {
  $('#map_canvas').gmap().bind('init', function(event, map) { 
    _map = map; // at this point you can call _map whenever you need to call the map

    // build up your markers here ...

    _markerCluster = new MarkerClusterer(_map, markers);  // you could also use map instead of _map here cause it's still present in this function
  });

  $("button.reset_markercluster").click(function(e) {
    e.preventDefault();
    _markerCluster.setMap(null);  // remove's the previous added markerCluster

    // rebuild you markers here ...

    _markerCluster = new MarkerClusterer(_map, newMarkers);

  });
});

- Manuel van Rijn

---

在构造函数中，您可以使用 map 和 markers 进行设置，或者您也可以使用 setMap() 进行设置。 - Manuel van Rijn

我遇到了一个错误，提示“对象没有可拖动的方法”。 - jaget

好的，和我一样。在循环_clusterer中的标记时，有没有办法找出该标记是否已经聚类？ - jaget

请注意，这实际上是另一个问题，无论如何请阅读JavaScript。它包含一个名为getMarkers()的方法，返回添加到聚类中的标记。您可以检查此数组以查明是否存在该标记。 - Manuel van Rijn

关于偏离原问题的观点很好。非常感谢您的帮助。 - jaget

Answer 3

最好使用markerCluster对象中的clearMarkers()方法：

http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/docs/reference.html 更新参考： https://googlemaps.github.io/js-markerclustererplus/classes/markerclusterer.html#clearmarkers

- HosseinSafy

---

更新的链接：https://googlemaps.github.io/js-markerclustererplus/classes/markerclusterer.html#clearmarkers - Doomd

Answer 4

您可以这样管理。

1. 创建空聚类变量

var _markerCluster;

2. 在我们的变量上存储聚类对象。

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

3. 当您删除标记时，需要编写以下代码。

    try{
         _markerCluster.clearMarkers();
    }catch(e){
    
    }

- Naresh Goyani

Answer 5

marker-clusterer-plus具有一个removeMarkers方法：

markerCluster.removeMarkers(markers);

- Carlo Espino

Answer 6

最近更新，将其添加到您的HTML中：

<script src="https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js"></script>

加入你的JS代码中

var mc = new markerClusterer.MarkerClusterer({ markers, map });

移除标记和聚类

function clearOverlays() {
  for (var i = 0; i < markers.length; i++ ) {
    markers[i].setMap(null);
  }
  markers=[];
  mc.clearMarkers();
}

- akelwood