Question

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

Answer 1

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

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

用于删除点击标记的事件监听器正在删除错误的标记

1 个答案: