Ist es mit Leaflet Js möglich, die On-Click-Position eines Markers zu ermitteln (Ankerpunkt ignorieren)?


11

Ich habe ein Markierungsobjekt mit einer bestimmten Höhe und Breite, und obwohl es auf eine einzelne Koordinate zeigt, umfasst die visuelle Darstellung der Markierung viele Pixel. Wenn ich auf die visuelle Darstellung des Markers klicke, möchte ich die zugrunde liegenden Kartenkoordinaten erhalten, aber stattdessen habe ich nur Zugriff auf die einzelne Lat / Lng-Koordinate, die dem Marker zugeordnet ist.

Antworten:


12

Einerseits: Immer wenn Leaflet ein Maus- (oder Berührungs-) Ereignis behandelt, können Sie in der originalEventEigenschaft des Ereignisses auf das ursprüngliche DOM-Ereignis zugreifen .

Auf der anderen Seite: Bei einem Maus- (oder Berührungs-) DOM-Ereignis kann Leaflet seine clientXund clientYEigenschaften auf magische Weise in eine Instanz L.LatLngvon mithilfe von übersetzen map.mouseEventToLatLng().

Kombinieren Sie diese beiden Dinge miteinander und Sie können so etwas wie:

marker.on('click', function(ev){
  var latlng = map.mouseEventToLatLng(ev.originalEvent);
  console.log(latlng.lat + ', ' + latlng.lng);
});

In der Dokumentation von Leaflet finden Sie weitere Konvertierungsmethoden, die sich als nützlich erweisen könnten.


Danke, das hat den Trick gemacht. Ich berechnete die Latlng basierend auf der Pixelanzahl wie var latlng = self._map.containerPointToLatLng([event.originalEvent.clientX - vpWidthDifference, event.originalEvent.clientY - vpHeightDifference]);
folgt

7

Sie können die Koordinaten jederzeit aus der Leaflet-Objektkarte abrufen. Sie können so etwas verwenden:

map.on('click', function(e){
  var coord = e.latlng;
  var lat = coord.lat;
  var lng = coord.lng;
  console.log("You clicked the map at latitude: " + lat + " and longitude: " + lng);
  });

Hier haben Sie ein Arbeitsbeispiel.


Hmm, es ist seltsam, weil ich auf Cäsium v1.25 laufe und jedes Mal, wenn ich auf die Markierung klicke, das Ereignisobjekt immer die Länge des Markierungsankerpunkts enthält, nicht die tatsächliche Koordinate der Karte wie in Ihrem Beispiel.
DarkKunai99

Ich habe nicht mit Cäsium gearbeitet, vielleicht kann Ivan oder auf dem cesiumTag Ihnen eine bessere Antwort geben.
Ramiroaznar

Ich entschuldige mich, ich wollte Leaflet (neueste
Version 1.0 RC

Schauen Sie sich die Antwort von Ivan an, sie wird Ihr Problem lösen. Meins verwendet, wie Sie sagten, eine sehr alte Faltblattversion (ich weiß nicht, woher ich das kopiere).
Ramiroaznar
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.