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

您正在听地图上的拖动事件，但您应该正在听标记（并且drag事件应该足够了）：
```
var onClick = function(e) {
    // ...

    marker.on('drag', onDrag);
};
```

在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;
};

和演示

＆＃13;

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);

＆＃13;

html, body {
  height: 100%;
  margin: 0;
}
#map {
  width: 100%;
  height: 200px;
}

.leaflet-tooltip {
pointer-events: auto
}

＆＃13;

<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>

＆＃13;

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

1 个答案: