多个Google标记不会使用拖动侦听器更新位置

Question

也许我在这里丢失了一些东西，但是由于它没有变化，我似乎无法在将其拖动后获得我的google标记的新位置。一切似乎都可以与我设置的第一个标记一起使用，但之后的任何标记都不起作用。我有一种感觉，即使我为每个标记都设置了侦听器，它仍会在事件侦听器中撤回第一个Google标记数据。

我的代码示例如下：

for(let x=0; x<markerArr.length; x++) {

        var marker = new google.maps.Marker({
            position: {
                lat: markerArr[x].lat,
                lng: markerArr[x].lng
            },
            map: map,
            title: markerArr[x].name,
            draggable: true,
            id: markerArr[x].id
        });

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

        google.maps.event.addListener(marker,'drag', function() {
           console.log('Dragging...');
           console.log(marker.getPosition().lat());
           console.log(marker.getPosition().lng());
        });

        google.maps.event.addListener(marker,'dragend', function() {
            console.log("Drag ended: " + marker.getPosition());  
        });
}

为什么侦听器只显示markerArr中第一个标记的位置更新？其他标记控制台记录的数字与第一个标记位置相同。

Answer 1

一种选择是在回调函数中使用this来引用标记。

在循环结束时，marker指向最后创建的标记。

for(let x=0; x<markerArr.length; x++) {

    var marker = new google.maps.Marker({
        position: {
            lat: markerArr[x].lat,
            lng: markerArr[x].lng
        },
        map: map,
        title: markerArr[x].name,
        draggable: true,
        id: markerArr[x].id
    });

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

    google.maps.event.addListener(marker,'drag', function() {
       console.log('Dragging...');
       console.log(this.getPosition().lat());
       console.log(this.getPosition().lng());
    });

    google.maps.event.addListener(marker,'dragend', function() {
        console.log("Drag ended: " + this.getPosition());  
    });
}