8

我试图在鼠标移动时获取 x,y 坐标。当我尝试获取它时，我遇到了错误。

TypeError：无法在 HTMLDivElement.onmousemove（仪表板：442）的 mouseMove（仪表板：593）处读取未定义的属性“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>
4

1 回答 1

7

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 之类的信息，这些信息不会出现在诸如“onmousemove”之类的本机 DOM 事件中。

此外，您可以访问鼠标事件的其他属性，例如事件发生的地图上的像素坐标。有关更多信息，请参阅此。

请记住，您可以轻松地将此事件更改为“单击”，并且仅在用户单击地图时提醒 lat lng 坐标。

请参阅此工作示例：http: //jsfiddle.net/LnzN2/684/

于 2017-02-07T13:24:52.120 回答