Leaflet中dragend事件后如何获取latlng？

Question

我正在尝试在标记移动后更新其纬度/经度值。提供的示例使用弹出窗口显示纬度/经度。

我为标记添加了“dragend”事件侦听器，但是当我警告(e.latlng)的值时，它返回未定义(undefined)。

javascript:

function markerDrag(e){
    alert("You dragged to: " + e.latlng);
}

function initialize() {
    // Initialize the map
    var map = L.map('map').setView([38.487, -75.641], 8);
    L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
        maxZoom: 18
    }).addTo(map);

    // Event Handlers
    map.on('click', function(e){
        var marker = new L.Marker(e.latlng, {draggable:true});
        marker.bindPopup("<strong>"+e.latlng+"</strong>").addTo(map);

        marker.on('dragend', markerDrag);
    });
}


$(document).ready(initialize());

http://jsfiddle.net/rhewitt/Msrpq/4/

- Roy

Answer 1

使用e.target.getLatLng()来获取更新位置的经纬度。

// Script for adding marker on map click
function onMapClick(e) {

    var marker = L.marker(e.latlng, {
             draggable:true,
             title:"Resource location",
             alt:"Resource Location",
             riseOnHover:true
            }).addTo(map)
              .bindPopup(e.latlng.toString()).openPopup();

    // #12 : Update marker popup content on changing it's position
    marker.on("dragend",function(e){

        var changedPos = e.target.getLatLng();
        this.bindPopup(changedPos.toString()).openPopup();

    });
}

JSFiddle演示

- Kedar.Aitawdekar

---

回答OP问题的关键是 ev.target.getLatLng()。 - Matt

有没有任何方法可以在Folium中实现？我找不到这个问题的答案。 - AnonymousUser

这就是我想要的，但在folium上实现。 - AnonymousUser

Answer 2

latlng值不在e.latlng中，而在e.target._latlng中。请使用控制台。

- lintu

---

你是如何使用控制台找到它实际上是e.target._latlng的？ - Roy

在 Fiddle 中放置一个调试器。 - lintu

能举个例子吗？我不知道如何在控制台输出一个我不知道的属性。 - Roy

在你希望中断的地方写上 "debugger" 并打开控制台。（重新加载页面 :) ）一旦中断点被触发，悬停在属性上或在控制台中键入。您可以看到所有内容。这将有所帮助... https://developers.google.com/chrome-developer-tools/docs/javascript-debugging - lintu

最好使用 e.target.getLatLng()；这样我们就不会暴露任何私有变量。 - user2441511

Answer 3

虽然使用e.target._latlng可以正常工作（正如这个答案所提出的），但最好的做法是使用：

e.target.getLatLng();

按照 Leaflet 的建议，这样我们就不会暴露任何私有变量：

私有属性和方法以下划线（_）开头。这并不意味着它们是私有的，只是建议开发人员不直接使用它们。

- user2441511

---

e.target.getLatLng 不是一个函数。 - Aral Roca

顺便说一句，const { lat, lng } = e.target.getCenter(); 对我来说完美地工作了。 - Aral Roca

Answer 4

我觉得API已经变了。

现在是：const { lat, lng } = e.target.getCenter();

- Aral Roca

---

你点击的是哪个对象，使用的是 Leaflet 的哪个版本？我只看到 getCenter() 方法适用于 L.map、L.latLngBounds 和 L.polyline（Leaflet 1.0.3）。而 getLatLng() 则适用于 L.marker、L.popup 和 L.circleMarker。 - user2441511

API没有改变。在1.3.0版本中，对于标记，仍然是e.target.getLatLng()。 - Matt

这很有帮助！在Leaflet版本1.0.3中，没有getLatLng方法。我一直在控制台中查找各种L.Point类，但这是我想要的数据。即使在Leaflet的源代码版本中，我也只看到了target对象作为NewClass，这对于在线文档的查找没有帮助，而且我也没有看到太多关于我正在使用的“move”事件的内容。 - Pysis

Answer 5

如果有人在使用React，那么你应该使用：

const map = useMap()
map.addEventListener("dragend" , ()=> {
const {lat , lng} = map.getCenter()
})

- gouder hicham