javascript - 多个可拖动标记未更新

Question

我在我的谷歌地图中实现了多个可拖动标记。现在我遇到的问题是，除了最后一个坐标之外，我的坐标似乎没有更新。

我没有收到任何错误，但只有标记 10 更新了位置和地址。

var map = new google.maps.Map(document.getElementById('mapCanvas'), {
    zoom: 10,
    center: new google.maps.LatLng(51.012904492831055, 4.3322019042968805),
    mapTypeId: google.maps.MapTypeId.ROADMAP
});

for(var i=0;i<10;i++)
{
        var latLng = new google.maps.LatLng(51.012904492831055, 4.3322019042968805);
        var marker = new google.maps.Marker({
            position: latLng,
            title: 'Point ' + (i+1),
            map: map,
            draggable: true
        });

        google.maps.event.addListener(marker, 'dragstart', function() {
            updateMarkerAddress('Dragging...');
        });

        google.maps.event.addListener(marker, 'drag', function() {
            updateMarkerStatus('Dragging...');
            updateMarkerPosition(marker.getPosition());
        });

        google.maps.event.addListener(marker, 'dragend', function() {
            updateMarkerStatus('Drag ended');
            geocodePosition(marker.getPosition());
        });
}

// Update current position info.
updateMarkerPosition(latLng);
geocodePosition(latLng);

Answer 1

这是变量作用域问题，var mark是循环内的全局变量，并通过循环进行更新，因此最后一个值是在循环结束时设置的。

只需将每个 google.maps.event.addListener 包装在一个函数中即可，即

(function(marker){ // Inside this function 'marker' is a local variable.
    google.maps.event.addListener(marker, 'dragstart', function() {
        updateMarkerAddress('Dragging...');
    });

    google.maps.event.addListener(marker, 'drag', function() {
        updateMarkerStatus('Dragging...');
        updateMarkerPosition(marker.getPosition());
    });

    google.maps.event.addListener(marker, 'dragend', function() {
        updateMarkerStatus('Drag ended');
        geocodePosition(marker.getPosition());
    });
})(marker); // Pass the 'global' marker variable as an argument