TypeError:无法读取undefined的属性'latlng'

Question

我试图在鼠标移动时获得x,y坐标.当我想要得到它时,我会收到错误.

TypeError:无法在HTMLDivElement.onmousemove(仪表板:442)的mouseMove(仪表板:593)处读取undefined属性'latlng'

<div id="map" onmousemove="mouseMove()"></div>
<script type="text/javascript">
        var iMaxZoom = 1;

        var map = L.map('map', {
            crs: L.CRS.Simple,
            minZoom: -5,
            maxZoom: 1
        });



        var bounds = [[0,0], [711,473]];

        var image = L.imageOverlay('{!! asset('assets/images/birlikmarket.png')  !!}', bounds).addTo(map);
        map.fitBounds(bounds);
        // mouse move detect x, y coordinates
        function mouseMove(e) {
            var tileSize = [711,473]
            try {
                console.log(e.latlng)
            }catch(error) {
                console.log(error)
            }
}
</script>

Answer 1

在Leaflet中发生给定事件(如mouseMove)时获取鼠标的LatLng

您的方法的一个问题是您正在向本机dom事件添加事件侦听器.而是将一个侦听器添加到自定义传单鼠标事件中,该事件将允许您访问latLng.

map.on的第一个参数是事件名称.第二个参数是事件发生时要调用的回调函数.传递给此回调函数"e"的arg是表示传单事件的对象.此事件的其中一个属性是latlng.

将以下内容放在脚本标记中:

map.on('mousemove', function(e) {
    alert("Lat, Lon : " + e.latlng.lat + ", " + e.latlng.lng)
});

"mousemove"是指Leaflet小鼠事件.Leaflet事件包含LatLng等信息,这些信息不会出现在本机DOM事件上,例如"onmousemove".

此外,您还可以访问鼠标事件的其他属性,例如发生事件的地图上的像素坐标.欲了解更多信息请参阅本.

请记住,您可以轻松地将此事件更改为"单击",并仅在用户单击地图时警告lat lng坐标.

看到这个工作示例:http://jsfiddle.net/LnzN2/684/