javascript - 無法刪除谷歌地圖標記

Question

我在使用谷歌地圖標記時遇到了一些麻煩。我有一個包含7個位置的數組。加載頁面時，「for」循環遍歷數組，並將前四個位置作爲標記放置在地圖上。然後，我想要發生的是能夠單擊「刪除並添加標記」按鈕，該按鈕將運行一個函數（稱爲addMarker2），以刪除原始4個位置標記並將最後3個位置標記添加到地圖。

我測試過的功能只添加最後3個標記，並且工作正常。但是，當我添加代碼以刪除前4個標記，然後添加最後3個標記時，它不再起作用。我一直在尋找答案，幾乎所有我發現的東西似乎都表明我正確地做了，儘管我很清楚。

var mapCanvas = document.getElementById('map-canvas'); 
var mapOptions = { 
    center: new google.maps.LatLng(40, -95), 
    zoom: 4, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
} 

// create the map 
var map = new google.maps.Map(mapCanvas, mapOptions); 

// array of locations 
var pins = [ 
     ['Cleveland',41.499321,-81.694359], 
     ['Florence',34.195435,-79.762566], 
     ['Knoxville',35.960638,-83.920739], 
     ['Memphis',35.149532,-90.048981], 
     ['Nashville',36.162664,-86.781602], 
     ['Phoenix',33.448376,-112.074036], 
     ['Toronto',43.653225,-79.383186] 
    ]; 


// Loop through the array of locations & place each one on the map 
for(i = 0; i < 4; i++) { 
    var position = new google.maps.LatLng(pins[i][1], pins[i][2]); 
    var marker = new google.maps.Marker({ 
     position: position, 
     map: map, 
     icon: 'http://i.imgur.com/FPiUErC.png', 
     title: pins[i]['0'] 
    }); 
} // end of the for loop 


function addmarker2() { 
    // remove the first four markers 
    for(i = 0; i < 4; i++) { 
     pins[i].setMap(null); 
    } 

    // add the last three markers 
    for(i = 4; i < 7; i++) { 
     var myPosition = new google.maps.LatLng(pins[i][1], pins[i][2]); 
     var marker = new google.maps.Marker({ 
      position: myPosition, 
      map: map, 
      icon: 'http://i.imgur.com/FPiUErC.png', 
      title: pins[i][0] 
     }); 
    } // end of for loop 
} // end of addmarker2 function 


$("#mysubmit").click(addmarker2); 

一些東西必須與我使用setMap（null）的方式不正確。 I have a jsfiddle of the code.它一開始不會工作，但如果你註釋掉試圖刪除前4個標記的「for」循環，那麼它將成功添加最後3個。我只是需要它來做到這兩點。

Answer 1

如果其他人遇到同樣的問題，並發現這個問題，正如ray說的，我需要創建一個數組來推入標記，然後將setMap（null）應用到標記數組，而不是應用它到包含我的位置信息的原始數組（引腳[]）。

var mapCanvas = document.getElementById('map-canvas'); 
var mapOptions = { 
    center: new google.maps.LatLng(40, -95), 
    zoom: 4, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
} 

// create the map 
var map = new google.maps.Map(mapCanvas, mapOptions); 

// array of locations 
var pins = [ 
     ['Cleveland',41.499321,-81.694359], 
     ['Florence',34.195435,-79.762566], 
     ['Knoxville',35.960638,-83.920739], 
     ['Memphis',35.149532,-90.048981], 
     ['Nashville',36.162664,-86.781602], 
     ['Phoenix',33.448376,-112.074036], 
     ['Toronto',43.653225,-79.383186] 
    ]; 

// this array will hold the markers 
var markers = []; 

// Loop through the array of locations & place each one on the map 
for(i = 0; i < 4; i++) { 
    var position = new google.maps.LatLng(pins[i][1], pins[i][2]); 
    var marker = new google.maps.Marker({ 
     position: position, 
     map: map, 
     icon: 'http://i.imgur.com/FPiUErC.png', 
     title: pins[i]['0'] 
    }); 
    //each marker is added to the markers array 
    markers.push(marker); 
} // end of the for loop 


function addmarker2() { 
    // remove the first four markers 
    for(i = 0; i < 4; i++) { 
     // the loop removes the first four results from the markers array 
     markers[i].setMap(null); 
    } 

    // add the last three markers 
    for(i = 4; i < 7; i++) { 
     var myPosition = new google.maps.LatLng(pins[i][1], pins[i][2]); 
     var marker = new google.maps.Marker({ 
      position: myPosition, 
      map: map, 
      icon: 'http://i.imgur.com/FPiUErC.png', 
      title: pins[i][0] 
     }); 
    } // end of for loop 
} // end of addmarker2 function 


$("#mysubmit").click(addmarker2); 

Answer 2

我已經通過在開發者控制檯上鍵入來進行調試，並且我找到了一種方法來刪除所有標記。 （其中使用array.push()方法保存）

這裏是代碼 - 只需要調用neutralize()：

function neutralize() { 
    for (var i = 0; i < markers.length; i++) { 
     try{ 
      markers[i].f.setMap(null); 
     } 
     catch{ 
      markers[i].setMap(null); 
     }  
    } 

    markers = []; 
}