Leaflet: Documentación de cómo rellenar el contenido emergente a través de ajax

Creado en 27 ago. 2012  ·  10Comentarios  ·  Fuente: Leaflet/Leaflet

¿Está documentado en algún lugar cómo rellenar el contenido de una ventana emergente de marcador al hacer clic en él?

Además, ¿es posible completar el contenido emergente de todos los marcadores visibles? Estoy usando Leaflet.markercluster y sería bueno cargar solo el contenido emergente cuando estoy lo suficientemente acercado para ver marcadores individuales.

No soy muy bueno con js y mis búsquedas no dieron nada, pero siento que lo que estoy tratando de hacer es posible ...

¡Gracias de nuevo!

Comentario más útil

Esto fue bien referenciado en Google, así que aquí está para las personas que buscan:

  • No es necesario crear manualmente una ventana emergente y llamar a map.openPopup; si tiene un marcador, puede usar bindPopup () y getPopup () si lo desea.
  • no olvide llamar a popup.update () http://leafletjs.com/reference.html#popup -update

Aquí hay un ejemplo de trabajo con el folleto 0.7.3:

var marker = L.marker([48.859085, 2.347403]);
marker.bindPopup("Loading...")
marker.on('click', function(e) {
    var popup = e.target.getPopup();
    var url="DYNAMIC_CONTENT_URL";
    $.get(url).done(function(data) {
        popup.setContent(data);
        popup.update();
    });

Todos 10 comentarios

Si crea una ventana emergente explícitamente, puede configurar el contenido:

var popup = new L.Popup();
popup.setLatLng(latlng);
popup.setContent('seme content');
map.openPopup(popup);

http://leaflet.cloudmade.com/reference.html#popup

Así que escuche el evento 'clic' en sus marcadores (puede configurar esto en MarkerClusterGroup). Luego, cuando se dispara, crea una ventana emergente con un mensaje de carga, carga el contenido a través de ajax y luego establece el contenido en el interior cuando vuelva.

var group = new L.MarkerClusterGroup();
group.on('click', showMarker);

function showMarker(marker) {
//use marker.layer for the marker IIRC
//Create popup here and fetch content
}

¡Espero que ayude!

¡Gracias, voy a estudiar esto e implementarlo!

Esto fue bien referenciado en Google, así que aquí está para las personas que buscan:

  • No es necesario crear manualmente una ventana emergente y llamar a map.openPopup; si tiene un marcador, puede usar bindPopup () y getPopup () si lo desea.
  • no olvide llamar a popup.update () http://leafletjs.com/reference.html#popup -update

Aquí hay un ejemplo de trabajo con el folleto 0.7.3:

var marker = L.marker([48.859085, 2.347403]);
marker.bindPopup("Loading...")
marker.on('click', function(e) {
    var popup = e.target.getPopup();
    var url="DYNAMIC_CONTENT_URL";
    $.get(url).done(function(data) {
        popup.setContent(data);
        popup.update();
    });

Tenga en cuenta que también puede pasar una función a bindPopup() . Se llamará cuando se abra la ventana emergente y debe devolver un String o HTMLElement . Entonces, otra versión de su código (que no dicta qué tipo de evento hace que se abra la ventana emergente):

var marker = L.marker([48.859085, 2.347403]);
marker.bindPopup(function() {
    var el = $('<div/>');

    $.get("DYNAMIC_CONTENT_URL").done(function(data) {
        el.setContent(data);
        popup.update();
    });

    return el;
});

¿Alguien tiene un ejemplo de trabajo en vivo de esto que estaría dispuesto a compartir?

@chriszrc eso me ahorró muchos problemas. gracias hombre

@chriszrc No se puede hacerlo con los datos JSON de una API.

No aparece ninguna ventana emergente.

Los datos de muestra tienen este aspecto:
{"datapoint":[{"intensity":92,"latitud":"18.52","longitud":"82.4767"},{"intensity":68,"latitud":"17.7375","longitud":"82.8347"}]}

Estoy tratando de mostrar la intensidad en la ventana emergente.

Esto es lo que he probado:

''
marker.bindPopup ((ventana emergente) => {
var el = document.createElement ('div');
el.classList.add ("mi-clase");
$ .getJSON (" http://www.example.com/data ", función (punto de datos) {
el.innerHTML = '

'+ punto de datos [i] .intensidad +'

';
});
 return el;

@kunaldhariwal tendrás que publicar un plunkr o algo, imposible de decir sin un ejemplo. Sin embargo, para empezar, la URL en la que está cargando el fragmento de código ("http://www.example.com/data") no parece devolver un json válido.

@chriszrc Sin
Lo siento, pero intentaré averiguar algo.

¿Fue útil esta página
0 / 5 - 0 calificaciones