Google Maps API v3:如何删除所有标记?

IT技术 javascript html google-maps google-maps-api-3
2021-01-21 23:59:02

在 Google Maps API v2 中,如果我想删除所有地图标记,我可以简单地执行以下操作:

map.clearOverlays();

如何在 Google Maps API v3 中执行此操作

查看Reference API,我不清楚。

6个回答

只需执行以下操作:

一、声明一个全局变量:

var markersArray = [];

二、定义一个函数:

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

或者

google.maps.Map.prototype.clearOverlays = function() {
  for (var i = 0; i < markersArray.length; i++ ) {
    markersArray[i].setMap(null);
  }
  markersArray.length = 0;
}

三、在调用以下命令之前在“markerArray”中推送标记:

markersArray.push(marker);
google.maps.event.addListener(marker,"click",function(){});

四、在需要的地方调用clearOverlays();ormap.clearOverlays();函数。

而已!!

for..in 循环与数组?这肯定不会很好..?..见:stackoverflow.com/questions/500504/...
2021-03-10 23:59:02
你总是可以设置markersArray一个空数组而不是设置它的长度,我觉得这有点奇怪:markersArray = [];
2021-03-11 23:59:02
或者,您可以使用 marker.setVisible(false) 隐藏标记
2021-03-16 23:59:02
我会使用一个while方法来处理数组:while(markersArray.length) { markersArray.pop().setMap(null); }之后无需清除数组。
2021-03-17 23:59:02
标记仍然保留在阵列中,因此它会变得越来越大。建议在循环后清除数组
2021-03-29 23:59:02

同样的问题。此代码不再起作用。

我已经更正了,以这种方式更改 clearMarkers 方法:

set_map(null) ---> setMap(null)

google.maps.Map.prototype.clearMarkers = function() {
    for(var i=0; i < this.markers.length; i++){
        this.markers[i].setMap(null);
    }
    this.markers = new Array();
};

文档已更新以包含有关该主题的详细信息:https : //developers.google.com/maps/documentation/javascript/markers#remove

我最终让它工作的方式是遍历我存储它们的标记集合并使用 setMap(null)
2021-03-22 23:59:02
但这是否会清除记忆中的标记?我意识到 JavaScript 具有自动垃圾收集功能,但是我们怎么知道在调用 setMap(null) 时 Google 的 API 没有对标记的引用?在我的应用程序中,我添加和“删除”了大量标记,我讨厌所有那些“删除”的标记都占用内存。
2021-03-22 23:59:02
现在在文档中回答了这个问题。code.google.com/apis/maps/documentation/javascript/...
2021-03-23 23:59:02
@Nick:添加“删除 this.markers[i];” 在 setMap(null) 位之后。
2021-03-25 23:59:02
谁甚至使用new Array();
2021-04-04 23:59:02

V3好像还没有这个功能。

人们建议将地图上所有标记的引用保留在数组中。然后当你想全部删除它们时,只需循环遍历数组并在每个引用上调用 .setMap(null) 方法。

有关更多信息/代码,请参阅此问题。

我的版本:

google.maps.Map.prototype.markers = new Array();

google.maps.Map.prototype.getMarkers = function() {
    return this.markers
};

google.maps.Map.prototype.clearMarkers = function() {
    for(var i=0; i<this.markers.length; i++){
        this.markers[i].setMap(null);
    }
    this.markers = new Array();
};

google.maps.Marker.prototype._setMap = google.maps.Marker.prototype.setMap;

google.maps.Marker.prototype.setMap = function(map) {
    if (map) {
        map.markers[map.markers.length] = this;
    }
    this._setMap(map);
}

该代码是此代码的编辑版本http://www.lootogo.com/googlemapsapi3/markerPlugin.html我删除了手动调用 addMarker 的需要。

优点

  • 这样做可以使代码紧凑并集中在一个地方(不会污染命名空间)。
  • 您不必再自己跟踪标记,您始终可以通过调用 map.getMarkers() 找到地图上的所有标记

缺点

  • 像我现在一样使用原型和包装器会使我的代码依赖于 Google 代码,如果他们对源代码进行重大更改,这将中断。
  • 如果你不理解它,那么你将无法修复它。他们改变任何会破坏这一点的可能性很小,但仍然..
  • 如果您手动删除一个标记,它的引用仍将在标记数组中。(你可以编辑我的 setMap 方法来修复它,但代价是循环低谷标记数组并删除引用)
抱歉延迟,我没​​有发布代码,因为我无法快速测试它。
2021-03-10 23:59:02
谢谢麦库。不过,我不明白 - 如何在您的示例中添加新标记。再次,非常感谢!
2021-04-01 23:59:02
我尝试使用 setMap(null),但我有一个自动更新脚本,每次我将所有 50 个左右的标记设置为空映射时,我仍然有一堆无映射标记漂浮在 DOM 的某个地方。这不断导致页面崩溃,因为它每 30 秒向 DOM 添加 50 个新标记,并且由于页面在视频墙上保持 24/7 全天候打开,这种情况会无休止地传播。在创建新地图之前,我必须使用最佳答案并完全清除 DOM 中的所有地图覆盖。希望这对某人有所帮助;我花了很长时间才弄清楚为什么我的页面崩溃了!:(
2021-04-05 23:59:02
+1 来自我。但是,如果您包含包装器以自动调用 addMarker,您的答案会更好!
2021-04-07 23:59:02
我假设您实际上是指安德鲁斯的回答。你会用代码展示你会做什么不同的,为什么。谢谢
2021-04-09 23:59:02

这是YingYang 于 2014 年 3 月 11 日 15:049在对用户原始问题的原始回复下最初发布的所有解决方案中最简单的

2.5 年后,我在 google maps v3.18 上使用他的相同解决方案,它的作用就像一个魅力

markersArray.push(newMarker) ;
while(markersArray.length) { markersArray.pop().setMap(null); }

// No need to clear the array after that.
google.maps.Map.prototype.markers = new Array();

google.maps.Map.prototype.addMarker = function(marker) {
    this.markers[this.markers.length] = marker;
};

google.maps.Map.prototype.getMarkers = function() {
    return this.markers
};

google.maps.Map.prototype.clearMarkers = function() {
    for(var i=0; i<this.markers.length; i++){
        this.markers[i].setMap(null);
    }
    this.markers = new Array();
};

我认为 V3 中没有,所以我使用了上面的自定义实现。

免责声明:这段代码不是我写的,但我在将它合并到我的代码库中时忘记保留引用,所以我不知道它来自哪里。

这怎么不是解决方案?您可以通过在要清除的特定标记上使用 set_map(null) 来删除标记,如果要清除所有标记,则使用此函数循环。如果您想要更多内容,请在此处请求:code.google.com/p/gmaps-api-issues/issues/...
2021-03-12 23:59:02
-1 糟糕的风格。只创建了一个标记数组,但在 clearMarkers 之后每个地图一个(因为 get/set 与原型不同)。多个地图对象的讨厌错误。
2021-03-15 23:59:02
+1 来自我。我会在 google.maps.Marker 构造函数(或 setMap 方法,因为我认为构造函数在内部调用它)周围添加一个包装器,它会自动调用 addMarker,但仍然是不错的答案:)。
2021-03-16 23:59:02
2021-04-03 23:59:02
@Maiku Mari,你会用代码展示你会做什么不同以及为什么。谢谢
2021-04-09 23:59:02