单击时删除标记的事件侦听器正在删除错误的标记答案

【问题标题】：Event listener for deleting markers on click, is deleting wrong markers单击时删除标记的事件侦听器正在删除错误的标记
【发布时间】：2013-07-02 19:00:47
【问题描述】：

此代码从数组加载 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>

【问题讨论】：

标签： google-maps-api-3

【解决方案1】：

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

<!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>

working example

【讨论】：

感谢 geocodezip，您的解决方案完美运行！函数闭包是所有 JavaScript 程序员都应该好好学习的关键话题。