[英]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.