Leaflet - 可拖动标记和坐标以字段形式显示

Question

我必须做一个可拖动的标记,它的坐标应该显示在字段中.它将成为PHP中联系表单的一部分.我创建了一个可拖动的标记,帮助我现在该做什么.

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

http://jsfiddle.net/xTh5U/

以下是Google Maps API中的示例,我在Leaflet中需要相同的内容.

Answer 1

您应该使用L.Marker的dragend事件,因此您知道拖动已经结束,然后使用L.Marker的getLatLng方法获取标记的坐标.获取后,您可以将它们分配给文本输入的值.

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

关于Plunker的工作示例: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