2012-01-28 37 views
9

Estoy tratando de resolver en los documentos de Leaflet.js cómo sería posible abrir más de una ventana emergente al mostrar la página. Por ejemplo, si uno tuviera tres marcadores (cada uno representando un edificio), cada uno tendría su ventana emergente abierta inmediatamente.Leaflet.js: abra todas las burbujas emergentes en la carga de la página

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

crípticamente dice:

"Uso Mapa # openPopup para abrir ventanas emergentes mientras se asegura de que sólo un emergente está abierto a la vez (se recomienda para su uso), o utilizar Mapa # addLayer para abrir como muchos como quieras ".

pero

http://leaflet.cloudmade.com/reference.html#map-addlayer

no da consejos sobre cómo esto podría ser alcanzable.

¿Alguien puede aclarar si esto es posible y dar alguna pista sobre cómo hacerlo?

Respuesta

9

Debe agregar las ventanas emergentes como Capa. Pruebe con este código de ejemplo:

var popupLocation1 = new L.LatLng(51.5, -0.09); 
var popupLocation2 = new L.LatLng(51.51, -0.08); 

var popupContent1 = '<p>Hello world!<br />This is a nice popup.</p>', 
popup1 = new L.Popup(); 

popup1.setLatLng(popupLocation1); 
popup1.setContent(popupContent1); 

var popupContent2 = '<p>Hello world!<br />This is a nice popup.</p>', 
popup2 = new L.Popup(); 

popup2.setLatLng(popupLocation2); 
popup2.setContent(popupContent2); 

map.addLayer(popup1).addLayer(popup2); 
+0

Excelente - realmente aprecio este ejemplo. ¿Estoy en lo cierto al pensar que no hay forma de tener tanto los iconos como las ventanas emergentes allí? – fooquency

+0

Hola fooquency, no sé. Intente publicar en los nuevos grupos de folletos oficiales: https://groups.google.com/forum/#!forum/leaflet-js – aborruso

+0

La respuesta a continuación utilizando la extensión de clase es un enfoque mucho mejor y debería ser la respuesta aceptada – masterchief

10
L.Map = L.Map.extend({ 
    openPopup: function(popup) { 
     // this.closePopup(); 
     this._popup = popup; 
     return this.addLayer(popup).fire('popupopen', { 
      popup: this._popup 
     }); 
    } 
}); 

ejemplo: http://jsfiddle.net/paulovieira/yVLJf/

encontrado aquí: https://groups.google.com/forum/#!msg/leaflet-js/qXVBcD3juL4/4pZXHTv1baIJ

+0

¿Puede explicar qué logrará este fragmento de código? Se aprecia si puedes explicarlo. –

+1

he editado mi respuesta. Del creador: "Usted puede" L.Class.Extend "la clase L.Map por defecto, definiendo un nuevo método openPopup. Este nuevo método será un simple copiar y pegar del predeterminado, excepto por la parte donde el menú emergente actual está cerrado (solo comenta esa línea) ". – gies0r

+0

Muchas gracias @ gies0r, el fragmento funciona como un amuleto – Kartik

-1

solución triky es eliminar el enlace emergente del objeto de mapa en abierto:

map.on('popupopen', function (e) { 
    delete map._popup; 
}); 
+0

¿Cómo afectará esto a la alternancia?/cerrando esa ventana emergente en el futuro? – Ethereal

0

En la última versión, hay un utoCerrar opción.

tener ambas marcador y emergente abiertos al mismo tiempo, y sin la adición de capas de forma explícita:

var popup1 = new L.Popup({'autoClose':false}); 
popup1.setLatLng([53.55375, 9.96871]); 
popup1.setContent('First popup'); 

var popup2 = new L.Popup({'autoClose':false}); 
popup2.setLatLng([53.552046, 9.9132]); 
popup2.setContent('Second popup'); 

L.marker([53.55375, 9.96871]).addTo(myMap) 
    .bindPopup(popup1).openPopup(); 

L.marker([53.552046, 9.9132]).addTo(myMap) 
    .bindPopup(popup2).openPopup(); 
5
marker.addTo(myMap).bindPopup('Hello popup', {autoClose:false}).openPopup(); 

utilización opción Autoclose

Cuestiones relacionadas