谷歌地圖JavaScript API v3刪除標記

Question

我看了很多「類似」的問題，並沒有任何解決方案/答案似乎爲我工作，所以我們走了：我正在生成一個簡單的谷歌地圖與一個標記「的onload」我然後有一個菜單列表有點像這樣

<ul> 
<li class="toggle" id="beaches">Item</li> 
<li class="toggle" id="towns">Item</li> 
<ul> 

上點擊使用這些陣列

標記填充地圖

的jQuery -

$(".toggle").click(function(){ 
setMarkers(map,$(this).attr('id')); 
}); 

var beaches = [ 
['Beach 1',38.285827, 20.611038, 4], 
['Beach 2', 38.304958,20.604515, 5], 
['Beach 3',38.301691,20.597649, 3] 
]; 

var towns = [ 
['Town 1',38.343003, 20.535679, 4], 
['Town 2',38.339334,20.545807, 5] 
]; 

我的人口樂趣ction看起來是這樣的：

function setMarkers(map, locations) { 
for (var i = 0; i < locations.length; i++) { 
var newmarker = locations[i]; 
var myLatLng = new google.maps.LatLng(newmarker[1], newmarker[2]); 
var marker = new google.maps.Marker({ 
position: myLatLng, 
map: map, 
title: newmarker[0], 
zIndex: newmarker[3] 
}); 
} 

但我需要/想要做的就是增加了新的明確之前首先所有標記。建議請致謝

Answer 1

您需要存儲標記，並且需要爲每個標記調用setMap(null)以從地圖中刪除。

你可以嘗試這樣的事：

var setMarkers = (function() { 
    var oldMarkers = null; 
    return function(map, locations){ 
     //Clearing markers, if they exist 
     if(oldMarkers && oldMarkers.length !== 0){ 
      for(var i = 0; i < oldMarkers.length; ++i){ 
       oldMarkers[i].setMap(null); 
      } 
     } 
     //Adding new markers 
     oldMarkers = []; 
     for (var i = 0; i < locations.length; i++) { 
      var newmarker = locations[i]; 
      var myLatLng = new google.maps.LatLng(newmarker[1], newmarker[2]); 
      var marker = new google.maps.Marker({ 
       position: myLatLng, 
       map: map, 
       title: newmarker[0], 
       zIndex: newmarker[3] 
      }); 
      oldMarkers.push(marker); 
     } 
    }; 
})(); 

Answer 2

您可以定義標記的全局數組，並通過調用setMap(null)清除那些之前你重新填充圖：

var markers = []; 

function setMarkers(map, locations) { 
    for (var i = 0; i < locations.length; i++) { 
     var newmarker = locations[i]; 
     var myLatLng = new google.maps.LatLng(newmarker[1], newmarker[2]); 

     if (markers[i]) { 
      markers[i].setMap(null); 
     } 

     markers[i] = new google.maps.Marker({ 
      position: myLatLng, 
      map: map, 
      title: newmarker[0], 
      zIndex: newmarker[3] 
     }); 
    } 
} 

Answer 3

也許你可以使用包含標記的空數組的一個函數：

function clear(){ 
    if(locations){ 
     for(var i=0;i<location.length;i++){ 
      locations[i].setMap(null); 
     } 
     locations.length=0; 
    } 
} 

Answer 4

Yo u需要確保你的標記被存儲在陣列中，然後除去做一些事情像

// Sets the map on all markers in the array. 
     function removeMarkers { 
     for (var i = 0; i < markers.length; i++) { 
      markers[i].setMap(null); 
     } 
     markers.length=0; 

     } 

所以，你的代碼現在是

var markers []; 

function setMarkers(map, locations) { 
// remove all markers first 
removeMarkers(); 
for (var i = 0; i < locations.length; i++) { 
var newmarker = locations[i]; 

var myLatLng = new google.maps.LatLng(newmarker[1], newmarker[2]); 
var marker = new google.maps.Marker({ 
position: myLatLng, 
map: map, 
title: newmarker[0], 
zIndex: newmarker[3] 
}); 
//add to marker array 
markers.push(marker); 
}