Несколько маркеров 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 внутри функции обратного вызова для ссылки на маркер.

В конце l oop, 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());  
    });
}

подтверждение концепции скрипта

фрагмент кода:

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>