关于拖动更新 lat、lng 变量的传单

Question

我试图让用户在我的传单地图上只创建一个标记。这工作正常：

var map = L.map("map").setView([-41.5, 173], 6);
var lat = 0.0;
var lon = 0.0;
var marker;

// on map click: get lat, lon - only allowed to happen once
var onClick = function(e) {
    map.off('click', onClick); //turn off listener for map click
    marker = L.marker(e.latlng,{icon: pin, draggable: true}).addTo(map);
    lat = e.latlng.lat;
    lon = e.latlng.lng;
    document.getElementById('outlat').innerHTML = e.latlng.lat;
    document.getElementById('outlon').innerHTML = e.latlng.lng;
};
map.on('click', onClick); //calling

问题是我需要在将单个标记拖到新位置时更新坐标变量。我尝试了几种方法，但都没有运气：

marker.addListener('down', onDrag);
marker.addListener('drag', onDrag);
marker.addListener('dragend', onDrag);

// on drag: update lat and lon
var onDrag = function (e) {
    lat = e.latlng.lat;
    lon = e.latlng.lng;
    document.getElementById('outlat').innerHTML = lat;
    document.getElementById('outlon').innerHTML = lon;
};
map.on('down', onDrag);
map.on('dragstart', onDrag);    
map.on('dragend', onDrag);

谢谢

Answer 1

1. 您正在收听地图上的拖动事件，但您应该正在收听标记（drag 事件应该足够了）：

   var onClick = function(e) {
       // ...
   
       marker.on('drag', onDrag);
   };
   

2. Leaflet 中的拖动事件大多是base events，并且不会暴露latlng 属性。您可以通过marker.getLatLng() 获取当前坐标：

   var onDrag = function (e) {
       var latlng = marker.getLatLng();
       document.getElementById('outlat').innerHTML = latlng.lat;
       document.getElementById('outlon').innerHTML = latlng.lng;
   };
   

还有一个演示

var map = L.map("map").setView([-41.5, 173], 6);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

var lat = 0.0;
var lon = 0.0;
var marker;

var onDrag = function (e) {
	var latlng = marker.getLatLng();
    document.getElementById('outlat').innerHTML = latlng.lat;
    document.getElementById('outlon').innerHTML = latlng.lng;
};

var onClick = function(e) {
    map.off('click', onClick); //turn off listener for map click
    marker = L.marker(e.latlng, {draggable: true}).addTo(map);
    lat = e.latlng.lat;
    lon = e.latlng.lng;
    document.getElementById('outlat').innerHTML = e.latlng.lat;
    document.getElementById('outlon').innerHTML = e.latlng.lng;

    marker.on('drag', onDrag);
};
map.on('click', onClick);

html, body {
  height: 100%;
  margin: 0;
}
#map {
  width: 100%;
  height: 200px;
}

.leaflet-tooltip {
pointer-events: auto
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.js"></script>
   
<div id='map'></div>
Lat: <span id='outlat'></span>
Lon: <span id='outlon'></span>