如何在Leaflet中获取“ dragend”事件的LatLng？

Question

我正在尝试在Leaflet地图上获得拖放标记的纬度和经度。

但是，我一直在获取TypeError: event.latlng is undefined错误。

这是我的整个代码：

var map = L.map('map');

googleStreets = L.tileLayer('http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}',{
  maxZoom: 20,
  subdomains:['mt0','mt1','mt2','mt3']
}).addTo(map);

map.locate({
  setView: true, 
  maxZoom: 16, 
  watch:false, 
  timeout: 60000,
  enableHighAccuracy: true
});
var marker; 
var circles;

function onLocationFound(e) {
  var radius = e.accuracy / 2;

  if(map.hasLayer(circles) && map.hasLayer(marker)) {
    map.removeLayer(circles);
    map.removeLayer(marker);
  } 

  marker = new L.Marker(e.latlng, {draggable:true});
  circles = new L.circle(e.latlng, radius);
  circles.bindPopup("You are within " + radius + " meters from this point").openPopup();;

  map.addLayer(marker);
  map.addLayer(circles);

  marker.on('dragend', function(event) {
    var mylat = event.latlng.lat
    var result = marker.getLatLng(); 
    console.log(mylat);
  });
}

当我在控制台内看到该错误时。

但是当我改变这个console.log(mylat); 到这个console.log(result); ，我在控制台中看到了很长的一段，但是它们的格式不是我想要的。

这是当我使用该控制台拖放代码时在控制台中得到的console.log(result); ：

 Object { lat=51.564025924107554,  lng=0.7077598571777344,  equals=function(),  more...}

有人可以为此提供建议吗？

提前致谢。

Answer 1

您正在听L.Marker的dragend事件。 如果您查看相关文档 ，就会发现dragend事件触发了事件处理程序，该事件处理程序收到一个DragEndEvent ，它仅具有distance ， type和target属性 。 没有latlng 。 那是意料之中的。

现在， DragEndEvent的target属性是L.Marker实例。 所以：

• 您不希望DragEndEvent的LatLng ，因为它甚至不存在
• 你想要的LatLng的的L.Marker这是target的的DragEndEvent 。

以及如何获得L.Marker的LatLng ？ 借助其getLatLng()方法。 所以：

marker.on('dragend', function(event) {
  var latlng = event.target.getLatLng();
  console.log(latlng.lat, latlng.lng)
});

请参阅工作示例 。