Ajouter un écouteur d'événements sur un marqueur dans Leaflet

J'utilise Leaflet pour rendre une carte. J'ai créé une carte avec des marqueurs et je ne sais pas comment implémenter le Listener d'événements 'onClick' sur chaque marqueur.

Mon code

var stops = JSON.parse(json);
var map = new L.Map('map', {
  zoom: 12,
  minZoom: 12,
  center: L.latLng(41.11714, 16.87187)
});
map.addLayer(L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
  attribution: 'Map data',
  maxZoom: 18,
  id: 'mapbox.streets',
  accessToken: '-----'
}));
var markersLayer = new L.LayerGroup();
map.addLayer(markersLayer);


//populate map from stops
for (var i in stops) {
  L.marker(L.latLng(stops[i].Position.Lat, stops[i].Position.Lon), {
    title: stops[i].Description
  }).addTo(markersLayer).bindPopup("<b>" + stops[i].Description + "</b>").openPopup();
}

Exemple

map.on('click', function(e) {
    alert(e.latlng);
});

La brochure traite des écouteurs d'événements par référence, donc si vous voulez ajouter un écouteur puis le supprimer, définissez-le comme une fonction:

function onClick(e) { ... }

map.on('click', onClick);
map.off('click', onClick);

Bienvenue sur GIS Stack Exchange!

Il ne devrait pas y avoir de difficulté particulière à attacher un rappel à un événement de clic de marqueur (s). Vous utiliseriez simplement myMarker.on('click', callback)comme vous l'avez fait avec la carte. Vous devrez également le faire pour chaque marqueur auquel vous souhaitez attacher un rappel.

Une autre possibilité serait d'ajouter tous vos marqueurs dans un groupe d'entités (par exemple, instanciez simplement votre markersLayeravec L.featureGroup()au lieu de L.layerGroup()), afin de pouvoir attacher le rappel directement à ce groupe. Il recevra les événements de clic des marqueurs individuels et vous pouvez accéder à la fonction cliquée individuelle à l'aide de event.layer.

var markersLayer = L.featureGroup().addTo(map);

// populate map from stops…

markersLayer.on("click", function (event) {
    var clickedMarker = event.layer;
    // do some stuff…
});

Démo: http://jsfiddle.net/ve2huzxw/74/

Question similaire posée par quelqu'un d'autre sur le forum Leaflet: https://groups.google.com/forum/#!topic/leaflet-js/RDTCHuLvMdw

Modifiez la boucle de population de votre carte pour attribuer des propriétés à votre marqueur.

//populate map from stops
for (var i in stops) {
  var oneMarker = L.marker(L.latLng(stops[i].Position.Lat, stops[i].Position.Lon), {
    title: stops[i].Description
  }).bindPopup("<b>" + stops[i].Description + "</b>").openPopup();

  oneMarker.properies.name = stops[i].Name;
  oneMarker.properies.description = stops[i].Description;
  oneMarker.properies.othervars = stops[i].othervars;
  oneMarker.addTo(markersLayer);
}

Plus tard, pour accéder à ces propriétés (propriétés de fonction comme on les appelle) dans l'événement onclick,

markersLayer.on("click", markerOnClick);

function markerOnClick(e) {
  var attributes = e.layer.properties;
  console.log(attributes.name, attributes.desctiption, attributes.othervars);
  // do some stuff…
}

L' properties.varapproche a l'avantage supplémentaire de rendre votre marqueur au format GeoJson standard. Le rend compatible si, par exemple, vous devez exporter les données sous forme de fichier de formes, importer des marqueurs à partir de fichiers de formes, etc.

Un moyen assez simple et facile de créer un tableau de marqueurs cliquables dans un objet de carte de dépliant consiste à manipuler la liste des classes du marqueur créé en ajoutant un nom de classe incrémenté personnalisé à chaque marqueur. Il est ensuite facile de créer un écouteur et de savoir quel marqueur a été cliqué. En sautant l'actif ou non, chacun a un événement de clic récupérable avec un ID fiable.

  // creates markers, each with a leaflet supplied class
  if (length === 1) {
    for (i = 0; i < parks.length; ++i) {
      if (parks[i].parksNumber !== parks.parksNumber)
        L.marker([parks[i].latitude, parks[i].longitude], {
          icon: parks[i].iconMarker
        }).addTo(mymap);
    }
  }

  // select all of the leaflet supplied class
  let markers = document.querySelectorAll(".leaflet-marker-icon");

  // loop through those elements and first assign the indexed custom class
  for (i = 0; i < markers.length; ++i) {
    markers[i].classList.add("marker_" + parks[i].parksNumber);

    // then add a click listener to each one
    markers[i].addEventListener("click", e => {

      // pull the class list
      let id = String(e.target.classList);

      // pull your unique ID from the list, be careful cause this list could 
      // change orientation,  if so loop through and find it
      let parksNumber = id.split(" ");
      parksNumber = parksNumber[parksNumber.length - 1].replace("marker_", "");

      // you have your unique identifier to then do what you want with
      search_Number_input.value = parksNumber;
      HandleSearch();
    });
  }