マーカーのドラッグ先のリーフレットの更新位置

Question

マーカー位置に基づいてフォーム上の2つの非表示フィールドの値を更新したいとします。私は私の答えを得るために、このlinkを読んで、これは私の最終的なコードである

<script> 
    var map = L.map('map', { 
     center: [33.505, 53.9], 
     zoom: 5 
    }); 
    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { 
     attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' 
    }).addTo(map); 
    map.on('dblclick', addMarker); 

    var Marker; 

    function addMarker(e) { 
     //remove previous markers 
     if (Marker) { 
      map.removeLayer(Marker); 
      UpdateLatLng(e); 
     } 
     // Add marker to map at click location; add popup window 
     Marker = new L.marker(e.latlng, { 
      draggable: true 
     }).addTo(map); 
    } 

    function UpdateLatLng(e) { 
     var latValue, lngValue; 
     latValue = e.latlng.lat; 
     lngValue = e.latlng.lng; 
     document.getElementById("map_lat").value = latValue; 
     document.getElementById("map_lng").value = lngValue; 
     //$("#map_lat").val() = latValue; 
    } 
    function UpdateLatLng2(e) { 
     var latValue, lngValue; 
     var position = marker.getLatLng(); 
     latValue = position.lat; 
     lngValue = position.lng; 
     document.getElementById("map_lat").value = latValue; 
     document.getElementById("map_lng").value = lngValue; 
     //$("#map_lat").val() = latValue; 
    } 
    Marker.on('dragend', UpdateLatLng2); 
</script> 

結果は私のフォームフィールドは、最初のダブルクリックイベントに更新されていないが、彼らは次のダブルクリック以降に更新されますということです代わりにマーカーのdragendイベントを使用します。どうして？

getElementByIdでは、なぜ次のコードは機能しませんか？

$("#map_lat").val() = latValue; 

助けてください。

Answer 1

フォームフィールドは、最初のダブルクリックでは更新されませんが、次のダブルクリックで更新されます。フォームのフィールドはマーカーのドラッグの後に更新されません。どうして？

これは、最初の時間は、あなたのスクリプトを実行する方法である最初のダブルクリックで

map.on('dblclick', addMarker); //|You attach the double click event handler. 
var Marker; //|You instansiate an undefined variable. 

function addMarker(e) { 
    if (Marker) { //|On the first double click, Marker is undefined. Your code will not get into this if condition. 
     map.removeLayer(Marker); 
     UpdateLatLng(e); // But your function is here. 
    } 
    // Add marker to map at click location; add popup window 
    Marker = new L.marker(e.latlng, { 
     draggable: true 
    }).addTo(map); 
} 

あなたMarkerが定義されていないので、UpdateLatLng(e)は呼び出されない飽きないだろう。 2回目のダブルクリックで、それが呼び出されます。

あなたは

function addMarker(e) { 
    //remove previous markers 
    if (Marker) { 
     map.removeLayer(Marker); 
    } 
    // Add marker to map at click location; add popup window 
    Marker = new L.marker(e.latlng, { 
     draggable: true 
    }).addTo(map); 

    UpdateLatLng(e); 
} 

、のようなあなたのaddMarker機能を更新することができますしかし、それは、マーカーの位置を更新する最悪の方法です。このコードはなく、getElementById作品を働いていない理由を私は

<script> 
    var map = L.map('map', { 
     center: [33.505, 53.9], 
     zoom: 5 
    }); 
    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { 
     attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' 
    }).addTo(map); 
    map.on('dblclick', addOrUpdateMarkerPosition); 

    var Marker; 

    function addOrUpdateMarkerPosition(e) { 
     if (!Marker) { 
      // Marker is undefined, create a new marker.. 
      // Add marker to map at click location; add popup window 
      Marker = new L.marker(e.latlng, { 
       draggable: true 
      }).addTo(map); 

      // Bind the event handlers 
      Marker.addListener('dragend', UpdateLatLng2); 
     } 
     else { 
      // Marker already exists, just update the position 
      Marker.setPosition(e.latlng); 
     } 

    } 

    function UpdateLatLng(e) { 
     var latValue, lngValue; 
     latValue = e.latlng.lat; 
     lngValue = e.latlng.lng; 
     document.getElementById("map_lat").value = latValue; 
     document.getElementById("map_lng").value = lngValue; 
    } 
    function UpdateLatLng2(e) { 
     var latValue, lngValue; 
     var position = marker.getLatLng(); 
     latValue = position.lat; 
     lngValue = position.lng; 
     document.getElementById("map_lat").value = latValue; 
     document.getElementById("map_lng").value = lngValue; 
    } 
</script> 

ところで、あなたのコードは、もう少しのようであることをお勧めしたい、あなたは知っていますか？

$("#map_lat").val() = latValue; 

このコードはjQueryのあるjavascriptの外部ライブラリを使用しています。 getElementByIdは純粋なJSなので、ライブラリは必要ありません。それを使用するには、基本的に次のスクリプトをページに含めるだけです。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>