如何在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...}

请问有人能就此提供建议吗？

提前感谢。

- Jackson

Answer 1

你正在监听一个 L.Marker 的 dragend 事件。如果你查看关于此事件的文档，你会发现 dragend 事件会触发事件处理程序，这些处理程序会接收一个只有 distance、type 和 target 属性的 DragEndEvent 对象。没有 latlng 属性。这是预期的。

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

• 你不需要 DragEndEvent 的 LatLng，因为它根本不存在。
• 你需要的是作为 DragEndEvent 目标的 L.Marker 的 LatLng。

那么如何获取 L.Marker 的 LatLng 呢？使用它的 getLatLng() 方法即可。所以：

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

查看一个实际示例。

- IvanSanchez