Google Maps API v3：如何清除所有标记？

问题描述

在 Google Maps API v2 中，如果我想删除所有的 Map 标记，我可以简单地做：

map.clearOverlays();

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

看着 Reference API，对我来说还不清楚。

最佳解决方案

只需执行以下操作：

I. 声明一个全局变量：

var markersArray = [];

II 。定义一个函数：

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;
}

III 。在调用以下命令之前，在’markerArray’ 中推送标记：

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

IV 。在需要的地方调用 clearOverlays(); 或 map.clearOverlays(); 功能。

而已！！

次佳解决方案

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

我已经纠正了，以这种方式改变 clearMarkers 方法：

set_map(null)—> 的 setMap(空)

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

第三种解决方案

V3 中似乎没有这样的功能。

人们建议保持对数组中 Map 上所有标记的引用。然后当你想删除所有的，只是循环通过数组，并调用.setMap(null) 方法在每个引用。

See this question for more info/code.

我的版本：

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() 来查找 Map 上的所有标记。

缺点

使用像我这样的原型和包装器现在使我的代码依赖于 Google 代码，如果他们的来源改变了市长，这将会破裂。
如果你不明白，那么如果断线，你将无法修复它。机会很低，他们会改变任何会打破这个，但仍然..
如果您手动删除一个标记，它的引用仍将在标记数组中。 (您可以编辑我的 setMap 方法来修复它，但是以循环槽标记数组为代价并删除引用)

第四种方案

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 中有一个，所以我使用上面的定制实现。

免责声明：我没有写这段代码，但是当我将其合并到代码库中时，我忘记保留引用，所以我不知道它来自哪里。

第五种方案

在新版本 v3 上，他们建议保留数组。如下。

参见 overlay-overview 的样品。

var map;
var markersArray = [];

function initialize() {
  var haightAshbury = new google.maps.LatLng(37.7699298, -122.4469157);
  var mapOptions = {
    zoom: 12,
    center: haightAshbury,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };
  map =  new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

  google.maps.event.addListener(map, 'click', function(event) {
    addMarker(event.latLng);
  });
}

function addMarker(location) {
  marker = new google.maps.Marker({
    position: location,
    map: map
  });
  markersArray.push(marker);
}

// Removes the overlays from the map, but keeps them in the array
function clearOverlays() {
  if (markersArray) {
    for (i in markersArray) {
      markersArray[i].setMap(null);
    }
  }
}

// Shows any overlays currently in the array
function showOverlays() {
  if (markersArray) {
    for (i in markersArray) {
      markersArray[i].setMap(map);
    }
  }
}

// Deletes all markers in the array by removing references to them
function deleteOverlays() {
  if (markersArray) {
    for (i in markersArray) {
      markersArray[i].setMap(null);
    }
    markersArray.length = 0;
  }
}

第六种方案

这是最初由 YingYang 于 11 月 14 日在 15：049 发布的所有解决方案中最简单的原始响应给用户的原始问题

我在 2.5 年后用谷歌 Mapv3.18 使用他相同的解决方案，它的作用就像一个魅力

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

// No need to clear the array after that.

第七种方案

Google 的 Demo Gallery 有一个关于他们如何做的演示：

http://code.google.com/apis/maps/documentation/javascript/examples/overlay-remove.html

您可以查看源代码以查看它们如何添加标记。

长篇小说，他们将标记保存在全局数组中。清除/删除它们时，它们循环遍历数组，并在给定的标记对象上调用”.setMap(null)” 。

但是，该示例显示了一个’trick’ 。此示例的”Clear” 意味着从 Map 中删除它们，但将其保留在数组中，这样可以使应用程序快速将其重新添加到 Map 中。在某种意义上，这样做就像”hiding” 一样。

“Delete” 也清除数组。

第八种方案

for (i in markersArray) {
  markersArray[i].setMap(null);
}

只在 IE 上工作。

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

工作在 chrome，firefox，ie …

第九种方案

在两个答案中发布的「set_map」功能似乎已经不再适用于 Google Maps v3 API 。

我不知道发生了什么

更新：

看来 Google 更改了 API，使「set_map」不是「setMap」。

http://code.google.com/apis/maps/documentation/v3/reference.html

第十种方案

一个干净和容易的应用 rolinger 的答案。

function placeMarkerAndPanTo(latLng, map) {
      while(markersArray.length) { markersArray.pop().setMap(null); }
      var marker = new google.maps.Marker({
        position: latLng,
        map: map
      });
      map.panTo(latLng);

      markersArray.push(marker) ;
    }

参考文献

Google Maps API v3: How to remove all markers?

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。

Google Maps API v3：如何清除所有标记？