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

Question

我有一个使用leafletJS的项目。

例如，我在地图上有2个点（A，B），我将它们显示为2个标记。

我必须从A到B绘制一条折线。

我移动了标记A，并希望标记A的折线头部与标记A匹配（跟随标记A移动）。

我该怎么做？

对不起我的英语不好。

非常感谢大家。

Truong M.

- Truong Mai

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。你可以自动化这个过程，但现在我会保持简单：

你需要将事件侦听器和回调函数附加到你的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;
        }
    }
}

现在你知道如何在拖动标记时更改折线的经纬度关键点：

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

在拖动结束时，为了保持清洁和整洁，请移除存储的键:

function dragEndHandler (e) {

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

就是这样。 这里有一个在Plunker上的工作示例：http://embed.plnkr.co/SJRec3/preview

- iH8

---

非常感谢 #iH8，你是我的偶像 :D - Truong Mai