0

This code loads lat/lng data from an array, and creates markers in a loop as the index advances. With each loop iteration, an event listener is created for each marker which should delete that marker on a click event using marker.setMap(null). The markers are placed properly in the map, but clicking on any of them deletes the final marker in the array, instead of the marker that was clicked on. I would expect such behavior if the event listener were placed after the loop, picking up only the last marker, but it is inside the loop. It seems straightforward, but I can't figure out what the problem is after trying many variations. Thanks for any help!

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

1 回答 1

0

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

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

工作示例

于 2013-07-02T19:18:36.427 回答