传单 - 如何在拖放时匹配标记和折线

Question

我有一个带有 LeafletJS 的项目。
例如，我在 map 中有 2 个点 (A, B)。我将其显示为 2 个标记
我必须画一条从 A 到 B 的折线。
我移动了标记 A，我想将标记 A 的折线的头部与标记 A 匹配(移动后跟随标记 A)。
我怎样才能做到这一点？
对不起，我的英语不好。
非常感谢大家。

长M。

Answer 1

鉴于以下 L.Latlng的, L.Marker的和 L.Polyline :

var a = new L.LatLng(-45, -90),
    b = new L.LatLng(45, 0),
    c = new L.LatLng(-45, 90);

var marker_a = new L.Marker(a, {draggable: true}).addTo(map),
    marker_b = new L.Marker(b, {draggable: true}).addTo(map),
    marker_c = new L.Marker(c, {draggable: true}).addTo(map);

var polyline = new L.Polyline([a, b, c]).addTo(map);

您需要将事件监听器和回调附加到您的 L.Marker的。您可以自动执行此操作，但现在我会保持简单:

marker_a
    .on('dragstart', dragStartHandler)
    .on('drag', dragHandler)
    .on('dragend', dragEndHandler);

marker_b
    .on('dragstart', dragStartHandler)
    .on('drag', dragHandler)
    .on('dragend', dragEndHandler);

marker_c
    .on('dragstart', dragStartHandler)
    .on('drag', dragHandler)
    .on('dragend', dragEndHandler);

现在，在 dragstart 上，您需要从与标记的 latlng 对应的折线中找到 latlng，并将其存储在标记实例中，以便稍后使用:

function dragStartHandler (e) {

    // Get the polyline's latlngs
    var latlngs = polyline.getLatLngs(),

        // Get the marker's start latlng
        latlng = this.getLatLng();

    // Iterate the polyline's latlngs
    for (var i = 0; i < latlngs.length; i++) {

        // Compare each to the marker's latlng
        if (latlng.equals(latlngs[i])) {

            // If equals store key in marker instance
            this.polylineLatlng = i;
        }
    }
}

现在您知道折线的 latlng 键，您可以在拖动 dragevent 上的标记时更改它:

function dragHandler (e) {

    // Get the polyline's latlngs
    var latlngs = polyline.getLatLngs(),

        // Get the marker's current latlng
        latlng = this.getLatLng();

    // Replace the old latlng with the new
    latlngs.splice(this.polylineLatlng, 1, latlng);

    // Update the polyline with the new latlngs
    polyline.setLatLngs(latlngs);
}

只是为了干净整洁，删除dragend上存储的 key :

function dragEndHandler (e) {

    // Delete key from marker instance
    delete this.polylineLatlng;
}

就是这样。这是一个关于 Plunker 的工作示例: http://embed.plnkr.co/SJRec3/preview