リーフレット - ドラッグ＆ドロップでマーカとポリラインを一致させる方法

Question

私はリーフレット付きのプロジェクトを持っています。 たとえば、私はマップに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にあなたは後でそれを使用することができます。

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 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上のマーカーをドラッグしたとき、あなたがそれを変更することができます緯度と経度ポリラインのの鍵を知っていますちょうどきれいできちんとするために、dragendに格納されたキーを削除してください：

function dragEndHandler (e) { 

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

それだけです。 Plunkerの実際の例は次のとおりです。http://embed.plnkr.co/SJRec3/preview