Google maps api 3 事件侦听器要在单击单个标记时删除它们，仅对上次创建的标记执行操作
您好，提前感谢您的帮助 以下测试代码： 1） 使用PHP从mySQL数据库获取lat/lng数据，然后使用该数据与初始化数据形成JavaScript数组。很好 2） 使用初始化的JavaScript数组创建标记。很好 3） 允许（左）单击以创建新标记（稍后将添加更多代码以将这些新标记位置添加回数据库）。很好 4） 允许右键单击以使用marker.setMap（null）删除标记-从数据库中预加载的标记或新创建的用户标记。用户标记正确删除，预加载的标记不会正确删除，如下所述 5） 预加载的标记和新创建的标记都使用语句markers.push（marker）存储在数组“markers”中。看起来还可以 除了右键单击删除预加载的标记外，所有操作都有效。（右键单击删除用户创建的标记可以正常工作。）右键单击任何预加载的标记，只会删除最后一个预加载的标记。这就好像删除事件侦听器位于设置预加载标记的循环的外部和之后，但它位于该循环的内部 我认为有问题的部分是一个与领先的评论“显示上一次点击数据库”。任何想法都将不胜感激！我是谷歌地图API v3的新手，所以很可能是我遗漏了什么或者误解了什么。再次感谢Google maps api 3 事件侦听器要在单击单个标记时删除它们，仅对上次创建的标记执行操作,google-maps-api-3,Google Maps Api 3,您好，提前感谢您的帮助 以下测试代码： 1） 使用PHP从mySQL数据库获取lat/lng数据，然后使用该数据与初始化数据形成JavaScript数组。很好 2） 使用初始化的JavaScript数组创建标记。很好 3） 允许（左）单击以创建新标记（稍后将添加更多代码以将这些新标记位置添加回数据库）。很好 4） 允许右键单击以使用marker.setMap（null）删除标记-从数据库中预加载的标记或新创建的用户标记。用户标记正确删除，预加载的标记不会正确删除，如下所述 5） 预加载的标记和新
<!DOCTYPE html>
<html>
<head>
<title>Marker Test</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map-canvas, #map_canvas {
height: 100%;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
<?
// Generate JavaScript array initialization from database
$username="REDACTED";
$password="REDACTED";
$database="REDACTED";
$con=mysql_connect(localhost,$username,$password);
@mysql_select_db($database,$con) or die( "Unable to select database");
$query="SELECT * FROM pool where (record_id >= 1765) AND (record_id <= 1769)";
/*
$query="SELECT * FROM pool where (record_id <= '$marker_end') AND (record_id >= '$marker_start')";
$query="SELECT * FROM pool where session = '$session'";
*/
$result=mysql_query($query,$con);
$length=mysql_num_rows($result);
$length_count=1;
if ($result) {
echo "var PreviousClicks = [\n";
while($row = mysql_fetch_array($result)) {
$_lat=$row['google_lat'];
$_lng=$row['google_lng'];
$_record_id=$row['record_id'];
echo "{\n";
echo "lat: $_lat,\n";
echo "lng: $_lng,\n";
echo "title: \"$_record_id\"\n";
echo "}";
if($length_count<$length) {echo ",\n";} else {echo "\n";}
$length_count++;
} // end while
echo "];";
} // end if
mysql_close();
?>
</script>
<script type="text/javascript">
var map;
var markers = [];
function addMarker(location) {
var marker = new google.maps.Marker({
position: location,
title: "A",
map: map
});
google.maps.event.addListener(marker, 'rightclick', function(event) {
marker.setMap(null);
});
markers.push(marker);
} //end addMarker function
function initialize() {
// currently manual center initialization
var startLoc = new google.maps.LatLng(33.037380,-117.090431);
var mapOptions = {
zoom: 16,
center: startLoc,
mapTypeId: google.maps.MapTypeId.TRAFFIC
};
map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
google.maps.event.addListener(map, 'click', function(event) {
addMarker(event.latLng);
});
// show prev clicks in database ------------------------------------------------------------------
for (i = 0; i < PreviousClicks.length; i++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(PreviousClicks[i].lat, PreviousClicks[i].lng),
title: PreviousClicks[i].title,
map: map
});
google.maps.event.addListener(marker, 'rightclick', function(event) {
marker.setMap(null);
});
markers.push(marker);
} // end for
// end "show prev clicks in database" section ----------------------------------------------------
} // end function initialize
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas">
</div>
</body>
</html>
标记试验
html，正文{
身高：100%；
保证金：0；
填充：0；
}
#地图画布，#地图画布{
身高：100%；
}
在标记的事件处理程序中，此
引用回标记。因此：
this.setMap(null);
将从地图中删除标记
但这段代码可以做更多的工作。特别是：
- 通过使用
addMarker（）
添加新的和以前的标记，避免重复代码
- 删除标记后，还要将其从标记数组中删除
两者都可以通过以下方式实现：
function addMarker(event) {
var marker = new google.maps.Marker({
position: event.latLng,
title: event.title || "A",
map: map
});
google.maps.event.addListener(marker, 'rightclick', function(event) {
this.setMap(null);
//Remove the marker from the markers array.
for(i=0; i<markers.length; i++) {
if(markers[i] == this) {
removed = markers.splice(i, 1);
break;
}
}
});
markers.push(marker);
}
function initialize() {
...
google.maps.event.addListener(map, 'click', addMarker);
...
for (i = 0; i < PreviousClicks.length; i++) {
addMarker({
latLng: new google.maps.LatLng(PreviousClicks[i].lat, PreviousClicks[i].lng);
title: PreviousClicks[i].title
});
}
}
函数addMarker（事件）{
var marker=new google.maps.marker({
位置：event.latLng，
标题：event.title | |“A”，
地图：地图
});
google.maps.event.addListener（标记，'rightclick'，函数（事件）{
此.setMap（null）；
//从标记数组中删除标记。
对于（i=0；iTry），右键单击以警告标记对象并查看其属性是否正确地显示在您正在执行操作的特定标记上。