从Leaflet.js获取地图坐标?

tyl*_*hes 12 javascript leaflet

我正在尝试使用Leaflet来获取用户右键单击某处的地图坐标.我一直在浏览Leaflet API,到目前为止,我已经发现我需要监听contextmenu事件并使用mouseEventToLatLng 方法来获取点击时的坐标.但是,当我浏览并调试我的代码时,我没有在任何地方看到可访问的latLng变量.我错过了理解API的内容吗?

function setMarkers() {
        document.getElementById("transitmap").addEventListener("contextmenu", function( event ) {
            // Prevent the browser's context menu from appearing
            event.preventDefault();

            var coords = L.mouseEventToLatLng( event );
        });
    };
Run Code Online (Sandbox Code Playgroud)

vad*_*lim 13

你想得到的是mousemove事件.这基本上就是你这样做的,

var lat, lng;

map.addEventListener('mousemove', function(ev) {
   lat = ev.latlng.lat;
   lng = ev.latlng.lng;
});

document.getElementById("transitmap").addEventListener("contextmenu", function (event) {
    // Prevent the browser's context menu from appearing
    event.preventDefault();

    // Add marker
    // L.marker([lat, lng], ....).addTo(map);
    alert(lat + ' - ' + lng);

    return false; // To disable default popup.
});
Run Code Online (Sandbox Code Playgroud)

  • 谢谢,有很大帮助! (2认同)

ghy*_*ybs 7

右键单击事件的坐标应该是直接可以作为latlng财产的的event的的说法"contextmenu"听众。

map.on("contextmenu", function (event) {
  console.log("Coordinates: " + event.latlng.toString());
  L.marker(event.latlng).addTo(map);
});
Run Code Online (Sandbox Code Playgroud)

演示:http : //plnkr.co/edit/9vm81YsQxnkAFs35N8Jo?p=preview