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：如何清除所有標記？