Google maps api 3 用于在单击时删除标记的事件侦听器正在删除错误的标记_Google Maps Api 3

Google maps api 3 用于在单击时删除标记的事件侦听器正在删除错误的标记

google-maps-api-3

Google maps api 3 用于在单击时删除标记的事件侦听器正在删除错误的标记,google-maps-api-3,Google Maps Api 3,此代码从数组加载lat/lng数据，并在索引前进时在循环中创建标记。在每次循环迭代中，将为每个标记创建一个事件侦听器，该标记应使用marker.setMap（null）删除单击事件上的该标记。标记已正确放置在地图中，但单击其中任何一个将删除阵列中的最终标记，而不是单击的标记。如果事件侦听器放在循环之后，只拾取最后一个标记，但它位于循环内部，则我会期望出现这种行为。这似乎很简单，但在尝试了许多变体之后，我无法找出问题所在。谢谢你的帮助 <!DOCTYPE html> <html

此代码从数组加载lat/lng数据，并在索引前进时在循环中创建标记。在每次循环迭代中，将为每个标记创建一个事件侦听器，该标记应使用marker.setMap（null）删除单击事件上的该标记。标记已正确放置在地图中，但单击其中任何一个将删除阵列中的最终标记，而不是单击的标记。如果事件侦听器放在循环之后，只拾取最后一个标记，但它位于循环内部，则我会期望出现这种行为。这似乎很简单，但在尝试了许多变体之后，我无法找出问题所在。谢谢你的帮助

<!DOCTYPE html>

<html>
<head>
<title>deleteMarkerTest.html</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">
var map;
var markersToSet = [
    {lat: 33.037430,lng: -117.090111,title: "1765"},
    {lat: 33.038330,lng: -117.090195,title: "1766"},
    {lat: 33.038013,lng: -117.087593,title: "1767"},
    {lat: 33.035110,lng: -117.088516,title: "1768"},
    {lat: 33.034447,lng: -117.089729,title: "1769"}
];

function initialize() {
    var mapCenter = new google.maps.LatLng(33.037380,-117.090431);
    var mapOptions = {
        zoom: 16,
        center: mapCenter,
        mapTypeId: google.maps.MapTypeId.TRAFFIC
    };

    map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);

    for (i = 0; i < markersToSet.length; i++) {
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(markersToSet[i].lat, markersToSet[i].lng),
            title: markersToSet[i].title,
            map: map
        });

        google.maps.event.addListener(marker, 'click', function(event) {
            marker.setMap(null);
        });
    }    
}

google.maps.event.addDomListener(window, 'load', initialize);

</script>

</head>
<body>
    <div id="map-canvas">
    </div>
</body>
</html>


deleteMarkerTest.html
html，正文{高度：100%；边距：0；填充：0；}
#地图画布，#地图画布{高度：100%；}
var映射；
变量标记集=[
{lat:33.037430，lng:-117.090111，标题：“1765”}，
{lat:33.038330，lng:-117.090195，标题：“1766”}，
{lat:33.038013，lng:-117.087593，标题：“1767”}，
{lat:33.035110，lng:-117.088516，标题：“1768”}，
{lat:33.034447，lng:-117.089729，标题：“1769”}
];
函数初始化（）{
var mapCenter=new google.maps.LatLng（33.037380，-117.090431）；
变量映射选项={
缩放：16，
中心：地图中心，
mapTypeId:google.maps.mapTypeId.TRAFFIC
};
map=new google.maps.map（document.getElementById（'map-canvas'），mapOptions）；
对于（i=0；i

标记变量向左指向最后一个标记（因此它被删除）。解决此问题的最简单方法是使用函数闭包将标记与单击事件关联：

<!DOCTYPE html>

<html>
<head>
<title>deleteMarkerTest.html</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">
var map;
var markersToSet = [
    {lat: 33.037430,lng: -117.090111,title: "1765"},
    {lat: 33.038330,lng: -117.090195,title: "1766"},
    {lat: 33.038013,lng: -117.087593,title: "1767"},
    {lat: 33.035110,lng: -117.088516,title: "1768"},
    {lat: 33.034447,lng: -117.089729,title: "1769"}
];

function initialize() {
    var mapCenter = new google.maps.LatLng(33.037380,-117.090431);
    var mapOptions = {
        zoom: 16,
        center: mapCenter,
        mapTypeId: google.maps.MapTypeId.TRAFFIC
    };

    map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);

    for (i = 0; i < markersToSet.length; i++) {
       createMarker(markersToSet[i].lat,markersToSet[i].lng,markersToSet.title);
    }
}

function createMarker(lat, lng,title) {
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(lat, lng),
            title: title,
            map: map
        });

        google.maps.event.addListener(marker, 'click', function(event) {
            marker.setMap(null);
        });
}
google.maps.event.addDomListener(window, 'load', initialize);

</script>

</head>
<body>
    <div id="map-canvas">
    </div>
</body>
</html>


deleteMarkerTest.html
html，正文{高度：100%；边距：0；填充：0；}
#地图画布，#地图画布{高度：100%；}
var映射；
变量标记集=[
{lat:33.037430，lng:-117.090111，标题：“1765”}，
{lat:33.038330，lng:-117.090195，标题：“1766”}，
{lat:33.038013，lng:-117.087593，标题：“1767”}，
{lat:33.035110，lng:-117.088516，标题：“1768”}，
{lat:33.034447，lng:-117.089729，标题：“1769”}
];
函数初始化（）{
var mapCenter=new google.maps.LatLng（33.037380，-117.090431）；
变量映射选项={
缩放：16，
中心：地图中心，
mapTypeId:google.maps.mapTypeId.TRAFFIC
};
map=new google.maps.map（document.getElementById（'map-canvas'），mapOptions）；
对于（i=0；i


谢谢geocodezip，您的解决方案非常有效！函数闭包是所有JavaScript程序员都应该好好学习的一个关键主题。