getlatlng - Haga clic en el enlace dentro de Leaflet Popup y haga Javascript

open popup marker leaflet

Question

Tengo un mapa de folleto en funcionamiento. Superpone una serie de polígonos (a través de GeoJSON) en el mapa y adjunta ventanas emergentes a cada polígono. Cada una de las ventanas emergentes muestra información sobre ese polígono.

Me gustaría tener dentro de la ventana emergente un enlace que, cuando se hace clic, ejecuta una función de JavaScript que atrae más polígonos pequeños a través de AJAX y los muestra.

No puedo conseguir que el script capture un clic en el enlace a través de los eventos normales de jQuery / Javascript click. Esto es lo que quiero decir con normal (lo siguiente no funciona):

$(''a .smallPolygonLink'').click(function(e){
  console.log("One of the many Small Polygon Links was clicked");
});

La parte bindPopup es la siguiente. Se ejecuta en cada polígono cuando está hecho y aparece correctamente al hacer clic en un polígono. Muestra el enlace, simplemente no ejecutará el código anterior al hacer clic.

var popupContent = "Basic Information..." + ''<a class="smallPolygonLink" href="#">Click here to see the smaller polygons</a>'';
layer.bindPopup(popupContent);

Aquí hay un JSFiddle que ilustra el ejemplo, aunque en una forma mucho más simple. http://jsfiddle.net/2XfVc/4/

Answer 1

El elemento de enlace dentro de la ventana emergente se genera dinámicamente a partir de su marcado cada vez que se abre la ventana emergente. Eso significa que el enlace no existe cuando tratas de vincular el controlador a él.

El enfoque ideal aquí sería usar on para delegar el manejo de eventos al elemento emergente o antecesor de él. Lamentablemente, la ventana emergente evita la propagación de eventos, por lo que no funcionará la delegación del manejo de eventos a elementos estáticos fuera de la ventana emergente.

Lo que puede hacer es preconstruir el enlace, adjuntar el controlador y luego pasarlo al método bindPopup .

var link = $(''<a href="#" class="speciallink">TestLink</a>'').click(function() {
    alert("test");
})[0];
marker.bindPopup(link);

Aquí hay una demostración: http://jsfiddle.net/2XfVc/7/

En general, para insertar cualquier tipo de marcado complejo con múltiples manejadores de eventos, use el siguiente enfoque:

// Create an element to hold all your text and markup
var container = $(''<div />'');

// Delegate all event handling for the container itself and its contents to the container
container.on(''click'', ''.smallPolygonLink'', function() {
    ...
});

// Insert whatever you want into the container, using whichever approach you prefer
container.html("This is a link: <a href=''#'' class=''smallPolygonLink''>Click me</a>.");
container.append($(''<span class="bold">'').text(" :)"))

// Insert the container into the popup
marker.bindPopup(container[0]);

Aquí hay una demostración: http://jsfiddle.net/8Lnt4/

Consulte este problema de Git para obtener más información sobre la propagación de eventos en las ventanas emergentes de folletos.

Answer 2

Eso es lo que encuentro en el sitio web oficial de mapbox: cree un evento de clic en un marcador emergente con Mapbox.js y jQuery. El comentario explica por qué decimos $(''#map'') lugar de $(''#mybutton'') .

var marker = L.marker([43.6475, -79.3838], {
  icon: L.mapbox.marker.icon({
    ''marker-color'': ''#9c89cc''
  })
})
.bindPopup(''<button class="trigger">Say hi</button>'')
.addTo(map);
//The HTML we put in bindPopup doesn''t exist yet, so we can''t just say
//$(''#mybutton''). Instead, we listen for click events on the map element which will bubble up from the tooltip, once it''s created and someone clicks on it.

$(''#map'').on(''click'', ''.trigger'', function() {
alert(''Hello from Toronto!'');});

Answer 3

Me encontré con este problema, intenté la solución anterior. Pero no funcionó para mí. Encontré la siguiente solución bastante básica de jquery.

// add your marker to the map
var my_marker = new L.marker([51.2323, 4.1231], {icon: my_icon});
var popup = L.popup().setContent(''<a class="click" href="#">click</a>'');
my_marker.addTo(map).bindPopup(popup);

// later on
jQuery("body").on(''click'',''a.click'', function(e){
  e.preventDefault();
  alert(''clicked'');
});

Answer 4

Mientras que el contenedor de contenido emergente evita la propagación de eventos, los eventos dentro del marcado interno emergente se propagan muy bien. Puede agregar eventos a elementos emergentes cuando se muestran en el mapa (y se han convertido en parte del DOM). Solo mire el evento de folleto popupopen .

var map = L.map(''map'').setView([51.505, 10], 7); //for example

//the .on() here is part of leaflet
map.on(''popupopen'', function() {  
  $(''a .smallPolygonLink'').click(function(e){
    console.log("One of the many Small Polygon Links was clicked");
  });
});

http://jsfiddle.net/tJGQ7/2/

Esto funciona como un encanto para mí. Si su ventana emergente no tiene un ''a .smallPolygonLink'' el código anterior no hace nada. Este código se ejecuta en cada inicio de una ventana emergente. Sin embargo, no tiene que preocuparse de que adjunte más de un manejador a un elemento, ya que cuando se cierra la ventana emergente, los nodos DOM se descartan.

Hay una forma mucho más general de hacer esto. Sin embargo, implica eval() . Use bajo su propio riesgo . Pero cuando AJAX carga páginas parciales que contienen JS, corre los mismos riesgos, por lo que para su edición presento "ejecutar JS dentro de las ventanas emergentes de su folleto":

map.on(''popupopen'', function(){
    var cont = document.getElementsByClassName(''leaflet-popup-content'')[0];    
    var lst = cont.getElementsByTagName(''script'');
    for (var i=0; i<lst.length;i++) {
       eval(lst[i].innerText)
    }
});

demo: http://jsfiddle.net/tJGQ7/4/

Ahora puedes escribir:

var popup_content = ''Testing the Link: <a href="#" class="speciallink">TestLink</a><script> $(".speciallink").on("click", function(){alert("hello from inside the popup")});</script>'';

marker.bindPopup(popup_content);

Answer 5

Puede usar jQuery para seleccionar el elemento canvas , pero tendría que usar sus propios métodos dentro del lienzo. Un comienzo decente sería https://developer.mozilla.org/en/canvas_tutorial .

Answer 6

Puede verificar las propiedades internas del objeto popup , incluyendo _wrapper etc.

map.on(''popupopen'', _bindPopupClick);
map.on(''popupclose'', _unbindPopupClick);

var _bindPopupClick = function (e) {
    if (e.popup) {
        e.popup._wrapper.addEventListener(''click'', _bindPopupClickHandler);
    }
};
var _unbindPopupClick = function (e) {
    if (e.popup) {
        e.popup._wrapper.removeEventListener(''click'', _bindPopupClickHandler);
    }
}`

Answer 7

la biblioteca JavaScript de la caja de mapas tiene un evento:

bindPopup(''<button class="trigger">Say hi</button>'');
addTo(map);

$(''#map'').on(''click'', ''.trigger'', function() {
    alert(''Hello from Toronto!'');
});

https://www.mapbox.com/mapbox.js/example/v1.0.0/clicks-in-popups/