javascript - una - Marcador en folleto, haga clic en evento

marcadores multiples desde una base de datos en google maps

Question

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)

Cuando hago clic en el marcador, el mensaje de alerta es: indefinido

¡Pero si lo coloco en el mapa variable, funciona! (muestra latitud y longitud)

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

¿Alguien sabe por qué no funciona en el marcador?

Answer 1

Aquí hay un jsfiddle con una llamada a función: 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);
}

Answer 2

Encontré la solución:

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

usó el método getLatLng () del marcador

Answer 3

Información relevante adicional: una necesidad común es pasar el ID del objeto representado por el marcador a alguna llamada ajax con el fin de obtener más información del servidor.

Parece que cuando lo hacemos:

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

El e apunta a un MouseEvent, que no nos permite llegar al objeto marcador. Pero hay un objeto incorporado que, curiosamente, nos exige utilizar this.options para llegar al objeto de options que nos permite pasar cualquier cosa que necesitemos. En el caso anterior, podemos pasar una identificación en una opción, digamos objid luego dentro de la función anterior, podemos obtener el valor invocando: this.options.objid

Answer 4

La respuesta anterior es correcta y correctamente aceptada. Sin embargo, similar a @snowgage necesitaba un poco más de claridad, por lo que en caso de que alguien más también lo haga:

Leaflet permite que los eventos se activen en prácticamente cualquier cosa que hagas en su mapa. En este caso, un marcador.

Entonces puedes crear un marcador por pregunta arriba:

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

Luego crea la función onClick:

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

Ahora, cada vez que mueva el mouse sobre ese marcador, disparará una alerta de lat / long actual. SIN EMBARGO, podría hacer ''click'', ''dblclick'', etc. en lugar de ''mouseover'' y en lugar de alertar lat / long puede usar js en el cuerpo de onClick para hacer cualquier otra cosa que desee.

Aquí está la documentación a seguir: http://leafletjs.com/reference.html#events

Edición de 2018 : tome nota del comentario de @ ryan-bobrowski a continuación. Gracias por la información de Ryan.

Answer 5

Un poco tarde para la fiesta, encontró esto mientras buscaba un ejemplo del evento de clic de marcador. El error indefinido que obtuvo el póster original es que se hace referencia a la función onClick antes de que se defina. Cambie la línea 2 y 3 y debería funcionar.