Estoy usando el folleto para representar un mapa. Creé un mapa con marcadores y no sé cómo implementar el escucha de eventos 'onClick' en cada marcador.
Mi código
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();
}
Ejemplo
map.on('click', function(e) {
alert(e.latlng);
});
El folleto trata con los oyentes de eventos por referencia, por lo que si desea agregar un oyente y luego eliminarlo, defínalo como una función:
function onClick(e) { ... }
map.on('click', onClick);
map.off('click', onClick);
javascript
leaflet
ilias ioannou
fuente
fuente
Respuestas:
¡Bienvenido a GIS Stack Exchange!
No debería haber ninguna dificultad especial en adjuntar una devolución de llamada al evento de clic de marcador (s). Simplemente usaría
myMarker.on('click', callback)
como lo hizo con el mapa. También debería hacerlo para cada marcador al que desee adjuntar una devolución de llamada.Otra posibilidad sería agregar todos sus marcadores en un Grupo de funciones (por ejemplo, simplemente crear una instancia de
markersLayer
con enL.featureGroup()
lugar deL.layerGroup()
), para que pueda adjuntar la devolución de llamada directamente a ese Grupo. Recibirá los eventos de clic de marcadores individuales, y puede acceder a la función de clic individual usandoevent.layer
.Demostración: http://jsfiddle.net/ve2huzxw/74/
Pregunta similar hecha por otra persona en el foro de Leaflet: https://groups.google.com/forum/#!topic/leaflet-js/RDTCHuLvMdw
fuente
event.layer.properties
le dará acceso a la matriz de todas las propiedades (metadatos) de sus marcadores, según el formato GeoJSON. Entonces puedes asignarevent.layer.properties.description = stops[i].Description
por ejemplo.Modifique el bucle de población del mapa para asignar propiedades a su marcador.
Más tarde, para acceder a estas propiedades (propiedades de características como se llaman) en el evento onclick,
El
properties.var
enfoque tiene el beneficio adicional de hacer que su marcador esté en el formato estándar GeoJson. Lo hace compatible si, por ejemplo, necesita exportar los datos como shapefile, importar marcadores desde shapefile, etc.fuente
var oneMarker
: es un ámbito local dentro del ciclo for, y la línea layer.addTo () le agrega valor. (como:a=3; array1.push[a];
agregará valor3
a la matriz, no una referencia aa
sí mismo).Una manera bastante directa y fácil de lograr crear una matriz de marcadores en los que se pueda hacer clic dentro de un objeto de mapa de folleto es manipular la lista de clases del marcador creado agregando un nombre de clase incremental personalizado a cada marcador. Entonces es fácil crear un oyente y saber en qué marcador se hizo clic. Al omitir el activo o no, cada uno tiene un evento de clic recuperable con una ID confiable.
fuente