Suite

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

Ajouter un écouteur d'événement 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 l'écouteur d'événements 'onClick' sur chaque marqueur.

mon code

var s'arrête = 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">

Bienvenue sur ce site SIG !

Il ne devrait y avoir aucune difficulté particulière à associer un rappel à un événement de clic sur le(s) marqueur(s). Vous utiliseriez simplementmyMarker.on('clic', rappel)comme tu l'as 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 de fonctionnalités (par exemple, instancier simplement votremarqueursCalqueavecL.featureGroup()à la place deL.layerGroup()), afin que vous puissiez 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 en utilisantcouche.événement.

var markersLayer = L.featureGroup().addTo(map); // remplir la carte à partir des arrêts… markersLayer.on("click", function (event) { var clickedMarker = event.layer; // faire des trucs… });

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 votre boucle de population de carte pour attribuer des propriétés à votre marqueur.

//remplir la carte des arrêts pour (var i dans les arrêts) { var oneMarker = L.marker(L.latLng(stops[i].Position.Lat, stops[i].Position.Lon), { title: stops[i ].Description }).bindPopup("" + arrêts[i].Description + "").openPopup(); oneMarker.properies.name = s'arrête[i].Name; oneMarker.properies.description = s'arrête[i].Description; oneMarker.properies.othervars = s'arrête[i].othervars; oneMarker.addTo( markersLayer); }

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

markersLayer.on("click", markerOnClick); function markerOnClick(e) { var attributs = e.layer.properties; console.log(attributs.nom, attributs.description, attributs.autresvars); // faire des trucs… }

lepropriétés.varL'approche a l'avantage supplémentaire de faire en sorte que votre marqueur soit 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 d'un fichier de formes, etc.


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

// crée des marqueurs, chacun avec un dépliant fourni 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); } } // sélectionne tous les dépliants fournis class let markers = document.querySelectorAll(".leaflet-marker-icon"); // boucle sur ces éléments et attribue d'abord la classe personnalisée indexée pour (i = 0; i < markers.length; ++i) { markers[i].classList.add("marker_" + parks[i].parksNumber) ; // puis ajoute un écouteur de clic à chacun des marqueurs[i].addEventListener("click", e => { // extrait la liste des classes let id = String(e.target.classList); // extrait votre identifiant unique de la liste, soyez prudent car cette liste pourrait // changer d'orientation, si c'est le cas, faites une boucle et trouvez-la let parksNumber = id.split(" "); parksNumber = parksNumber[parksNumber.length - 1].replace("marker_", " "); // vous avez votre identifiant unique pour ensuite faire ce que vous voulez avec search_Number_input.value = parksNumber; HandleSearch(); }); }

Voir la vidéo: Leaflet Boot Camp 4: Adding Markers, Circles, and Polygons to the Map