[英]javascript - can't remove google map markers
我在使用Google地圖標記時遇到了一些麻煩。 我有一個包含7個位置的數組。 當頁面加載時,“ for”循環遍歷數組並將前四個位置作為標記放置在地圖上。 然后,我想要發生的是能夠單擊“刪除並添加標記”按鈕,這將運行一個函數(稱為addMarker2)以刪除原始的4個位置標記並將最后3個位置標記添加到地圖。
我已經測試了僅添加最后3個標記的功能,並且效果很好。 但是,當我添加代碼以在添加后3個標記之前刪除前4個標記時,它不再起作用。 我一直在尋找答案,幾乎所有發現的內容似乎都表明我做得正確,盡管顯然我沒有。
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)的方式必須不正確。 我有一個代碼的jsfiddle。 最初它不會起作用,但是如果您注釋掉試圖刪除前4個標記的“ for”循環,那么它將成功添加后3個標記。我只需要同時執行這兩個標記即可。
如果其他人遇到相同的問題並找到了這個問題,如ray所述,我需要創建一個數組以將標記推入,然后將setMap(null)應用於markers數組,而不是將其應用於原始數組包含我的位置信息的數組(pins [])。
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);
通過在開發人員控制台上進行輸入,我已經可以進行實時調試,並且找到了一種刪除所有標記的方法。 (使用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 = [];
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.