web-dev-qa-db-fra.com

Marqueur dans la brochure, événement de clic

var map = L.map('map');
var marker = L.marker([10.496093,-66.881935]).on('click', onClick);
function onClick(e) {alert(e.latlng);}
marker.addTo(map)

Lorsque je clique sur le marqueur, le message d'alerte est le suivant: indéfini

Mais si je le mets dans la carte des variables, ça marche! (indique la latitude et la longitude)

map.on('click', onClick);

Est-ce que quelqu'un sait pourquoi cela ne fonctionne pas dans le marqueur?

javascriptleaflet
52
Jonathan García

J'ai trouvé la solution:

function onClick(e) {alert(this.getLatLng());}

utilisé la méthode getLatLng () du marqueur

16
Jonathan García

La réponse acceptée est correcte. Cependant, j'avais besoin d'un peu plus de clarté, donc au cas où quelqu'un d'autre le ferait aussi:

Leaflet permet aux événements de se déclencher sur pratiquement tout ce que vous faites sur sa carte, dans ce cas un marqueur.

Ainsi, vous pourriez créer un marqueur comme suggéré par la question ci-dessus:

L.marker([10.496093,-66.881935]).addTo(map).on('mouseover', onClick);

Puis créez la fonction onClick:

function onClick(e) {
    alert(this.getLatLng());
}

Maintenant, chaque fois que vous passez la souris sur ce marqueur, une alerte sera émise sur le lat/long actuel.

Cependant, vous pouvez utiliser 'click', 'dblclick', etc. au lieu de 'mouseover' et au lieu d'alerter lat/long, vous pouvez utiliser le corps de onClick pour faire tout ce que vous voulez:

L.marker([10.496093,-66.881935]).addTo(map).on('click', function(e) {
    console.log(e.latlng);
});

Voici la documentation: http://leafletjs.com/reference.html#events

61
Chris

Voici un jsfiddle avec un appel de fonction: https://jsfiddle.net/8282emwn/

var marker = new L.Marker([46.947, 7.4448]).on('click', markerOnClick).addTo(map);

function markerOnClick(e)
{
  alert("hi. you clicked the marker at " + e.latlng);
}
16
Timo Sperisen

Informations pertinentes supplémentaires: Un besoin commun consiste à transmettre l'ID de l'objet représenté par le marqueur à un appel ajax dans le but d'extraire plus d'informations du serveur.

Il semble que lorsque nous le faisons:

marker.on('click', function(e) {...

Le e pointe vers un MouseEvent, ce qui ne nous permet pas d’obtenir l’objet marqueur. Mais il existe un objet this intégré qui, étrangement, nous oblige à utiliser this.options pour accéder à l’objet options qui nous permet de passer tout ce dont nous avons besoin. Dans le cas ci-dessus, nous pouvons passer un identifiant dans une option, disons objid, puis dans la fonction ci-dessus, nous pouvons obtenir la valeur en appelant: this.options.objid

12
Will