À l'aide du dépliant Js, est-il possible de connaître l'emplacement d'un clic d'un marqueur (ignorer le point d'ancrage)?


11

J'ai un objet marqueur qui a une hauteur et une largeur spécifiques, et bien qu'il pointe vers une seule coordonnée, la représentation visuelle du marqueur s'étend sur plusieurs pixels. Lorsque je clique sur la représentation visuelle du marqueur, je souhaite obtenir les coordonnées cartographiques sous-jacentes, mais à la place, je n'ai accès qu'à la seule coordonnée lat / lng associée au marqueur.

Réponses:


12

D'une part: chaque fois que Leaflet gère un événement souris (ou tactile), vous pouvez accéder à l'événement DOM d'origine dans la originalEventpropriété de l'événement.

D'un autre côté: étant donné un événement DOM de souris (ou tactile), Leaflet peut traduire comme par magie ses propriétés clientXet clientYen une instance de L.LatLngen utilisant map.mouseEventToLatLng().

Combinez ces deux choses ensemble, et vous pouvez avoir quelque chose comme:

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

Consultez la documentation de Leaflet pour les autres méthodes de conversion, car elles pourraient s'avérer utiles.


Merci, ça fait l'affaire. Je calculais le latlng basé sur le nombre de pixels comme tel:var latlng = self._map.containerPointToLatLng([event.originalEvent.clientX - vpWidthDifference, event.originalEvent.clientY - vpHeightDifference]);
DarkKunai99

7

Vous pouvez toujours récupérer les coordonnées de la carte d'objet Leaflet. Vous pouvez utiliser quelque chose comme ceci:

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);
  });

Voici un exemple de travail.


Hmm, c'est étrange parce que je tourne sur Cesium v1.25, et chaque fois que je clique sur le marqueur, l'objet événement contient toujours le latlng du point d'ancrage du marqueur, pas les coordonnées réelles de la carte comme dans votre exemple.
DarkKunai99

Je n'ai pas travaillé avec Césium, peut-être qu'Ivan ou sur l' cesiumétiquette peut vous donner une meilleure réponse.
ramiroaznar

Je m'excuse, je voulais dire Leaflet (dernier v1.0 rc)
DarkKunai99

Jetez un œil à la réponse donnée par Ivan, cela résoudra votre problème. La mienne, comme vous l'avez dit, utilise une très ancienne version de Leaflet (je ne sais pas d'où je la copie).
ramiroaznar
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.