2017-02-07 23 views
8

Tôi đang cố gắng để có được tọa độ x, y khi di chuyển chuột. Và tôi nhận được lỗi khi tôi cố gắng để có được nó.LoạiError: Không thể đọc thuộc tính 'latlng' của undefined

TypeError: Cannot read property 'latlng' of undefined at mouseMove (dashboard:593) at HTMLDivElement.onmousemove (dashboard:442)

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

Trả lời

7

Lấy LatLng của chuột khi một sự kiện được như MouseMove xảy ra trong Tờ rơi

Một vấn đề với cách tiếp cận của bạn là bạn đang thêm một event listener với một sự kiện dom mẹ đẻ . Thay vào đó, hãy thêm một người nghe vào một sự kiện chuột tờ tùy chỉnh sẽ cho phép bạn truy cập vào latLng.

Đối số đầu tiên của map.on là tên sự kiện. Đối số thứ hai là hàm gọi lại để gọi khi sự kiện xảy ra. Hàm arg được chuyển đến hàm gọi lại này là "e" là đối tượng biểu diễn sự kiện tờ rơi. Một trong những thuộc tính của sự kiện này là latlng.

Đặt sau trong thẻ script của bạn:

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

"MouseMove" dùng để chỉ một sự kiện Tờ rơi chuột. Các sự kiện Leaflet chứa các thông tin như LatLng sẽ không có mặt trên các sự kiện DOM bản địa như "onmousemove".

Ngoài ra, bạn có thể truy cập các thuộc tính khác của sự kiện chuột chẳng hạn như tọa độ pixel trên bản đồ nơi sự kiện xảy ra. Để biết thêm thông tin, xem this.

Hãy nhớ rằng bạn có thể dễ dàng thay đổi sự kiện này thành "nhấp" và chỉ cảnh báo tọa độ lng lat khi người dùng nhấp vào bản đồ.

Xem ví dụ hoạt động này: http://jsfiddle.net/LnzN2/684/

+0

Cảm ơn bạn đã trả lời. Tôi cũng đã thử trả lời của bạn nhưng không làm gì cả. –

+0

Bạn đã đặt nó trong các thẻ và cuối cùng sau khi bản đồ đã được khởi tạo chưa? – therewillbecode

+0

vâng tôi đặt nó trong các thẻ script ở cuối –

Các vấn đề liên quan