Quiero abrir una ventana emergente en la parte inferior del icono de mi marcador en el folleto.
mi código:
var mymap = L.map('mapid').setView([51.505, -0.09], 13);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw', {
maxZoom: 18,
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="http://mapbox.com">Mapbox</a>',
id: 'mapbox.streets'
}).addTo(mymap);
var lati = 51.51;
var longi = -0.09;
var popupLocation1 = new L.LatLng(lati, longi);
var popupContent1 = 'This is a nice popup';
popup1 = new L.Popup();
popup1.setLatLng(popupLocation1);
popup1.setContent(popupContent1);
var m1 = L.marker([ lati, longi ]).addTo(mymap);
m1.bindPopup(popup1);
m1.openPopup();
Entonces aparece una ventana emergente en la parte superior de mi marcador.
Quiero obtener una ventana emergente en la parte inferior como:
Respuestas:
Puede especificar los desplazamientos utilizando las
popupAnchor
opciones, pero no donde lo esperaría. Primero, debe especificar un icono como este:Luego puede usar este icono en sus opciones de marcador:
Ahora su ventana emergente se abre 30 px por encima de su marcador. Esto no es exactamente lo que pediste, ya que también debes colocar el pequeño triángulo de flecha en la parte superior de tu ventana emergente, pero creo que aún vale la pena mencionarlo.
fuente
No existe una solución de folletos nativa.
Otra forma es usar https://github.com/erictheise/rrose
Buena demostración:
http://jsfiddle.net/asleepwalker/6m81vtad/
fuente
Sé que esta es una vieja pregunta, pero no es necesario tomar el desvío @Robert descrito en su respuesta.
Como
Popup
se hereda deDivOverlay
, puede establecer la opción de desplazamiento directamente al inicializarPopup
:Lea los documentos: https://leafletjs.com/reference-1.5.0.html#popup
fuente
Esto parece ser posible solo en CSS. A continuación, anulo (con
!important
) solo tres elementos CSS y agrego un:before
pseudo-elemento. Básicamente, primero estoy alineando la ventana emergente con la parte superior en lugar de la inferior , donde55px
solo depende del marcador elegido y el gusto personal.Luego muevo la "punta" de la ventana emergente de manera similar desde abajo hacia abajo
top:0px
, y descubro que no está hecha con el truco "normal" (es decir: primero coloca en el borde de la burbuja un pseudo-elemento de tamaño 0x0 con un borde transparente grueso, luego colorea ese borde opuesto del elemento de donde desea apuntar; en nuestro caso, el borde inferior). En cambio, parece estar hecho de un rectángulo girado desde algún lugar en la parte superior izquierda (tal vez: ¿porque obliga al navegador a usar la GPU y, por lo tanto, acelera todo?) Y no entiendo el punto (perdón por el juego de palabras) lo suficientemente bien ( mi punta está en el lugar correcto pero invisible); así que simplemente elimino la sombra de la caja que ahora está en el lugar equivocado y la dejo como está --- cualquiera que entienda el "viejo consejo" por favor, ajústelo.Entonces, en cambio, hago mi propio consejo, con el proceso "normal" (si no está seguro, cambie los cuatro colores de borde a continuación, en lugar de 3x transparente y 1x blanco --- por ejemplo
border-bottom-color: blue; border-left-color: green; border-top-color: yellow' border-right-color: red
).Como lo demuestra este JSFiddle , no hay problema con diferentes tamaños de ventanas emergentes (ancho diferente, altura de texto diferente) si prueba ambos marcadores.
En general, esto parece robusto frente a las actualizaciones en el folleto, ya que los elementos que estoy anulando no parecen cambiar.
fuente