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

使多个标记可拖动

1 个答案: