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