我是Javascript的初学者，并试图了解Google Maps API v3的作品。在这个网站上找到了一个很好的答案问题，这是最受欢迎的答案。 Google Maps JS API v3 - Simple Multiple Marker Example
> <!DOCTYPE html> <html> <head> <meta http-equiv="content-type"
> content="text/html; charset=UTF-8" /> <title>Google Maps Multiple
> Markers</title> <script
> src="http://maps.google.com/maps/api/js?sensor=false"
> type="text/javascript"></script> </head> <body> <div id="map" style="width: 500px; height: 400px;"></div>
>
> <script type="text/javascript">
> var locations = [
> ['Bondi Beach', -33.890542, 151.274856, 4],
> ['Coogee Beach', -33.923036, 151.259052, 5],
> ['Cronulla Beach', -34.028249, 151.157507, 3],
> ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
> ['Maroubra Beach', -33.950198, 151.259302, 1]
> ];
>
> var map = new google.maps.Map(document.getElementById('map'), {
> zoom: 10,
> center: new google.maps.LatLng(-33.92, 151.25),
> mapTypeId: google.maps.MapTypeId.ROADMAP
> });
>
> var infowindow = new google.maps.InfoWindow();
>
> var marker, i;
>
> for (i = 0; i < locations.length; i++) {
> marker = new google.maps.Marker({
> position: new google.maps.LatLng(locations[i][1], locations[i][2]),
> map: map
> });
>
> google.maps.event.addListener(marker, 'click', (function(marker, i) {
> return function() {
> infowindow.setContent(locations[i][0]);
> infowindow.open(map, marker);
> }
> })(marker, i));
> } </script> </body> </html>
这对lika来说很有魅力，但现在我正在尝试实现一个删除特定标记的功能。无论我想做什么都会使代码崩溃。我最后的尝试是调用一个函数来删除所有标记，如下所示：
function deleteMarker(){
for (i = 0; i < locations.length; i++) {
marker.setMap(null);
}
}
仍然不起作用。
我在这里失踪的是什么？ 感谢所有的帮助，因为我花了好几个小时试图找出这个...
答案 0 :(得分：2)
您正在覆盖每个循环上的marker-object，因此您的函数deleteMarker只能删除最后一个标记。
将创建的标记存储在某处（locations-array将是一个好地方）：
for (i = 0; i < locations.length; i++) {
locations[i][4]
= marker
= new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
现在您可以稍后访问标记对象：
function deleteMarker(m){
for (i = 0; i < locations.length; i++) {
if(m===locations[i][3]){
locations[i][4].setMap(null);
}
}
}
答案 1 :(得分：0)
function initmap(result) {
if (result.length > 0) {
var map_options = {
center: new google.maps.LatLng(result[0].latitude, result[0].longitude),
zoom: zoomcount,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var google_map = new google.maps.Map(document.getElementById("map_canvas"), map_options);
var info_window = new google.maps.InfoWindow({
content: 'loading'
});
var t = []; // --> Title
var x = []; // --> latitude
var y = []; // --> longitude
var h = []; // --> HTML
var f = "female.png";
var m = "male.png";
// alert(obj.value);
// var result = getPingDetails();
if (result.length > 0) {
for (_count = 0; _count < result.length; _count++) {
t.push(result[_count].mobileuser);
x.push(result[_count].latitude);
y.push(result[_count].longitude);
var src = "http://www.eangelgps.com/image.ashx?id=" + result[_count].mobileuser;
//if (result[_count].gender == "Male") src += m;
//else src += f;
//h.push('<div style="height:120px;"><p><img src="' + src + '" /><strong>' + result[_count].firstname + " " + result[_count].lastname + '</strong><br/>' + result[_count].companyname + '(' + result[_count].designation + ')<br/>Gender:' + result[_count].gender + '<br />Mobile:' + result[_count].mobilenumber + '<br /><a href="#" onclick="moreinfo(\'' + result[_count].mobileuser + '\');">More details...</a><br /><br /><input type="button" value="Acknowledge" onclick="javascript:acknowledged(' + result[_count].pingId + ');" /></p></div>');
if (result[_count].acknowledge == "False" && result[_count].done == "False") {
h.push('<div style="width:290px;"><div style="width:290px; height:auto;"><div style="float:left;"><img src="' + src + '" width="100" height="auto" /></div><div>' +
'<b style="color:#004bb2; padding:7px 0 0 10px;">' + result[_count].firstname + " " + result[_count].lastname + '</b></div><div>' +
'<span style="font-size:15px; color:#292727;line-height:20px;">' + result[_count].companyname + '(' + result[_count].designation + ')</span><br />' +
'<span style="font-size:15px; color:#292727; line-height:20px;">Gender :' + result[_count].gender + '</span><br />' +
'<span style="font-size:15px; color:#292727;line-height:18px;">Mobile :' + result[_count].mobilenumber + '</span><br />' +
'<span style="font-size:11px; color:#004bb2; font-weight:bold;"><a href="#" onclick="moreinfo(\'' + result[_count].mobileuser + '\');">More details</a></span></div>' +
'<div style="margin-top:17px;">' +
'<input type="button" value="Acknowledge" class="button" onclick="javascript:acknowledged(' + result[_count].pingId + ',this);" /><input type="button" class="button" value="Done" style="display:none;" onclick="javascript:markdone(' + result[_count].pingId + ',this);" />' +
'</div></div></div>');
}
else if (result[_count].acknowledge == "True" && result[_count].done == "False") {
h.push('<div style="width:290px;"><div style="width:290px; height:auto;"><div style="float:left;"><img src="' + src + '" width="100" height="auto" /></div><div>' +
'<b style="color:#004bb2; padding:7px 0 0 10px;">' + result[_count].firstname + " " + result[_count].lastname + '</b></div><div>' +
'<span style="font-size:15px; color:#292727;line-height:20px;">' + result[_count].companyname + '(' + result[_count].designation + ')</span><br />' +
'<span style="font-size:15px; color:#292727; line-height:20px;">Gender :' + result[_count].gender + '</span><br />' +
'<span style="font-size:15px; color:#292727;line-height:18px;">Mobile :' + result[_count].mobilenumber + '</span><br />' +
'<span style="font-size:11px; color:#004bb2; font-weight:bold;"><a href="#" onclick="moreinfo(\'' + result[_count].mobileuser + '\');">More details</a></span></div>' +
'<div style="margin-top:17px;">' +
'<input type="button" value="Done" class="button" onclick="javascript:markdone(' + result[_count].pingId + ',this);" />' +
'</div></div></div>');
}
}
// t.push('Location Name 2');
// x.push(33.84659);
// y.push(-84.35686);
// h.push('<p><strong>Location Name 2</strong><br/>Address 2</p>');
var i = 0;
for (item in t) {
m = new google.maps.Marker({
map: google_map,
animation: google.maps.Animation.DROP,
title: t[i],
position: new google.maps.LatLng(x[i], y[i]), html: h[i]
//position:
});
google.maps.event.addListener(m, 'click', function () {
info_window.setContent(this.html);
info_window.open(google_map, this);
});
i++;
}
}
//result = null;
}
//else { window.document.getElementById('map_canvas').innerHTML = '<div style="vertical-align:middle;width:50%; height:50%;margin:0 auto; padding:20% 0 0 0;"> On click of iOS user name on left panel<br /> OR <br /> Check state(s) on right panel <br /> <br /> Google Map will update here accordingly.</div>'; }
}
var markers = [];
function setAllMap(google_map) {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(google_map);
}
}
function clearMarkers() {
//setMap(null); or
setMap(clearMarkers);
}