使多个标记可拖动

Question

我使用数组在带有地理位置的照片传单地图中创建了几个标记，效果很好：

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);
});

因为我所有的标记都有相同的构造函数，所以这个脚本似乎只适用于最后一个标记。所有其他的都是可拖动的，但在释放时不返回任何反馈。

有谁知道，我怎样才能访问所有这些？

Answer 1

您可以通过在 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);
}

Demo

使多个标记可拖动

make multiple markers draggable

leaflet

markers