Leaflet - 可拖動的標記和座標以字段形式顯示

Question

我必須做一個可拖動的標記，並且它的座標應顯示在字段中。它將成爲PHP中聯繫表單的一部分。我創建了一個可拖動的標記，幫助我現在做什麼。

var marker = L.marker(new L.LatLng(53.471, 18.744), { 
draggable: true 
}).addTo(map); 

http://jsfiddle.net/xTh5U/

這裏是例如在谷歌地圖API，我需要傳單一樣。

Answer 1

您應該使用L.Marker的dragend事件，以便您知道拖動已結束，然後使用L.Marker的getLatLng方法獲取標記的座標。當你提取這些文件時，可以將它們分配給文本輸入的值。在Plunker

marker.on('dragend', function (e) { 
    document.getElementById('latitude').value = marker.getLatLng().lat; 
    document.getElementById('longitude').value = marker.getLatLng().lng; 
}); 

工作例如：http://plnkr.co/edit/iyMhaoAyllr2uNSOHhS9?p=preview

Answer 2

碰到這個在尋找類似的解決方案。將標記的答案分叉並使其稍微進一步：

• 拖拽和單擊;並在標記上映射中心。
• 也反向工作（用戶在表單域中輸入的值可以將標記移動 ）。
• 記住用戶標記的以前的位置。

執行代碼：

marker.on('dragend', function (e) { 
    updateLatLng(marker.getLatLng().lat, marker.getLatLng().lng); 
    }); 
map.on('click', function (e) { 
marker.setLatLng(e.latlng); 
updateLatLng(marker.getLatLng().lat, marker.getLatLng().lng); 
}); 

function updateLatLng(lat,lng,reverse) { 
if(reverse) { 
marker.setLatLng([lat,lng]); 
map.panTo([lat,lng]); 
} else { 
document.getElementById('latitude').value = marker.getLatLng().lat; 
document.getElementById('longitude').value = marker.getLatLng().lng; 
map.panTo([lat,lng]); 
} 
} 

見工作示例：http://plnkr.co/edit/PTFlun?p=preview