сделать несколько маркеров перетаскиваемым - PullRequest
Новая
       9

сделать несколько маркеров перетаскиваемым

1 голос
/ 14 июня 2019

Я использую массив для создания пары маркеров на моей листовой карте для фотографий с геолокацией, которая отлично работает: 

for (var p of ArrayofData) {
    var lat = p.lat;
    var lon = p.lon;
    var markerLocation = new L.LatLng(lat, lon);
    var marker = new L.Marker(markerLocation,{
        draggable: 'true',
        id: p.Filename
    });
    mymap.addLayer(marker);
}

, чтобы дать пользователям возможность менять местоположение фотографии. Мне нужно, чтобы они перетаскивали эти маркеры вокруги тогда я могу прочитать новое местоположение: 

marker.on('dragend', function (e) {
    // Get position of dropped marker
    var latLng = e.target.getLatLng();
    console.log ("id:"+e.target.options.id);
    console.log ("NewLocation:"+latLng);
});

Поскольку все мои маркеры имеют одинаковый конструктор, создается впечатление, что этот скрипт работает только с последним маркером.Все остальные являются перетаскиваемыми, но не дают никаких отзывов при выпуске.

Кто-нибудь знает, как я могу получить доступ ко всем из них?

1 Ответ

2 голосов
/ 14 июня 2019

Вы можете сделать это, добавив обработчики событий перетаскивания внутри цикла for. 

for (var p of data) {
    var lat = p.lat;
    var lon = p.lon;
    var markerLocation = new L.LatLng(lat, lon);
    var marker = new L.Marker(markerLocation,{
        draggable: 'true',
        id: p.Filename
    });

    map.addLayer(marker);

    marker.on('dragend', function (e) {
        // Get position of dropped marker
        var latLng = e.target.getLatLng();
        console.log ("id:"+e.target.options.id);
        console.log ("NewLocation:"+latLng);
    });
}

Также я настоятельно рекомендую отслеживать маркеры, добавляя их в массив. 

var markers = [];

for (var p of data) {
    var lat = p.lat;
    var lon = p.lon;
    var markerLocation = new L.LatLng(lat, lon);
    var marker = new L.Marker(markerLocation,{
        draggable: 'true',
        id: p.Filename
    });

    map.addLayer(marker);

    marker.on('dragend', function (e) {
        // Get position of dropped marker
        var latLng = e.target.getLatLng();
        console.log ("id:"+e.target.options.id);
        console.log ("NewLocation:"+latLng);
    });

    markers.push(marker);
}

Демо

...