不能删除谷歌地图标记
can't remove google map markers
我在谷歌地图标记上遇到了一些麻烦。我有一个包含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)的方式一定不正确。我有一份代码清单。它一开始不会工作,但如果你注释掉试图删除前4个标记的"for"循环,那么它将成功添加最后3个标记。
如果其他人也有同样的问题并发现这个问题,正如ray所说,我需要创建一个数组来将标记推入,然后将setMap(null)应用于标记数组,而不是将其应用于包含我的位置信息的原始数组(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 = [];
}
相关文章:
- 如何更改角度谷歌地图上的集群图标
- 谷歌地图API-显示具有不同图标的标记
- 谷歌地图-更改图层图标大小
- 在地图加载/页面加载时,我想将地图设置为当前地理位置,但不想在地图上显示定位图标
- 将图标作为参数传递不会;t工作-谷歌地图
- 谷歌地图隐藏手图标
- 从谷歌地图信息窗口中删除关闭图标
- 在javascript中设置谷歌地图标记图标属性
- 我是否可以在单击特定图标时更改地图标记图标,然后在单击另一个图标时切换,等等
- 我如何才能在某些条件下更改c#中谷歌地图标记的图标
- 使用HTML元素代替gmap3的地图标记图标
- 谷歌地图标记图标作为变量
- 我如何使谷歌地图不更改标记的自定义图标大小
- 饼图而不是谷歌地图中的标记集群图标
- 如何在谷歌地图上放置图标标记,图标数量是否有配额
- 可拖动图标未显示在 Google 地图顶部且不重复
- 谷歌地图v3更改标记图标在安卓网络视图
- AngularJS谷歌地图(ng-map)图标网址不起作用
- 带有群集和过滤器复选框的地图框个性化图标
- 添加 removeMarker 函数时,每 5 秒在地图上加载一次图钉不会显示图标