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

Question

也许我在这里遗漏了一些东西，但我似乎无法在拖动谷歌标记后获得它的新位置，因为它没有改变。一切似乎都适用于我设置的第一个标记，但之后的任何标记都不起作用。我有一种感觉，即使我为每个标记设置了一个监听器，它也会在事件监听器中拉回第一个 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());  
    });
}

proof of concept fiddle

代码片段:

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 8
  });
  var markerArr = [{lat:-34.397, lng: 150.644}, {lat: -34.497, lng: 150.644}]
  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());  
        });
}
}

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}

/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap" async defer></script>