多个 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());  
    });
}

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>

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

Multiple Google markers won't update position with drag listener

javascript

google-maps

google-maps-api-3

google-maps-markers

dom-events