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

时间:2015-11-04 03:57:41

标签: leaflet marker polyline

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

Truong M。

1 个答案:

答案 0 :(得分:9)

鉴于以下L.LatlngL.MarkerL.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);

您需要将eventlisteners和回调附加到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;
        }
    }
}

现在你知道了折线的关键,你可以在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上存储的密钥:

function dragEndHandler (e) {

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

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