2017-02-07 3 views
8

Ich versuche, X, Y-Koordinaten bei Mausbewegung zu erhalten. Und ich bekomme Fehler, wenn ich versuche, es zu bekommen.TypeError: Eigenschaft 'latlng' von undefined kann nicht gelesen werden

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> 

Antwort

7

die LatLng der Maus bekommen, wenn ein bestimmtes Ereignis wie mouse in Leaflet

Ein Problem mit Ihrem Ansatz auftritt, ist, dass Sie einen Ereignis-Listener zu einem nativen dom Ereignis hinzufügen . Fügen Sie stattdessen einen Listener zu einem benutzerdefinierten Blättchen-Mausereignis hinzu, das Ihnen den Zugriff auf latLng ermöglicht.

Das erste Argument von map.on ist der Ereignisname. Das zweite Argument ist die Rückruffunktion, die beim Auftreten des Ereignisses aufgerufen wird. Der Arg, der an diese Rückruffunktion "e" übergeben wird, ist das Objekt, das das Broschürenereignis darstellt. Eine der Eigenschaften auf dieser Veranstaltung ist latlng.

gebe folgende in Ihrem Script-Tags:

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

"mousemove-" bezieht sich auf ein Ereignis Leaflet Maus. Leaflet-Ereignisse enthalten Informationen wie LatLng, die bei nativen DOM-Ereignissen wie "onmousemove" nicht vorhanden sind.

Zusätzlich können Sie auf andere Eigenschaften des Mausereignisses zugreifen, z. B. die Pixelkoordinaten auf der Karte, auf der das Ereignis aufgetreten ist. Für weitere Informationen siehe this.

Denken Sie daran, dass Sie dieses Ereignis genauso einfach auf "Klicken" ändern können und nur die Koordinaten des LTS anzeigen können, wenn der Benutzer auf die Karte klickt.

Sehen Sie dieses Arbeitsbeispiel: http://jsfiddle.net/LnzN2/684/

+0

Danke für Ihre Antwort. Ich habe Ihre Antwort auch versucht, aber tut nichts. –

+0

Haben Sie es innerhalb der Tags und am Ende nach der Initialisierung der Karte? – therewillbecode

+0

Ja, ich habe es am Ende in Skript-Tags eingefügt –

Verwandte Themen