javascript - google - leaflet openstreetmap
El mapa de folletos no se muestra correctamente dentro del panel con pestañas (2)
Bootstrap 3 tiene eventos de espacio de nombres personalizados, por lo que las respuestas anteriores funcionarían con:
$("body").on("shown.bs.tab", "#link3", function() {
map.invalidateSize(false);
});
Referencia: Pestañas Bootstrap
Estoy tratando de usar Leaflet.js para mostrar un mapa dentro de un panel con pestañas de Twitter Bootstrap, pero se está comportando de una manera extraña:
Cuando hago clic en la pestaña que contiene el panel, aparece una capa gris en la parte superior del mapa. Si arrastro y muevo el mapa, puedo ver otros mosaicos, pero no los iniciales.
Aún más extraño es que si cambio el tamaño del navegador, de repente funciona perfectamente, hasta que vuelva a cargar, por lo que supongo que es un problema con el CSS, pero no puedo encontrar el problema.
Además, colocar el mapa fuera del panel con pestañas funciona muy bien.
Probé en Firefox y Chrome, y ambos tienen el mismo problema.
Creé una prueba en jsfiddle para verla "en vivo": http://jsfiddle.net/jasalguero/C7Rp8/1/
¡Cualquier ayuda es muy apreciada!
Es un truco completo de meterse con el código fuente de leaflet.js, pero funciona (al menos en jsFiddle) http://jsfiddle.net/C7Rp8/4/
La idea es de Google Maps, para "cambiar el tamaño" o "volver a dibujar" el mapa cuando se cambia el tamaño de su contenedor div.
Los cambios que hice son:
agregar id link3 a la pequeña pestaña en HTML
<a href="#lC" data-toggle="tab" id="link3">tab3</a>
agregue un oyente a esta pestaña dentro de $(function() {
$("body").on(''shown'',''#link3'', function() {
L.Util.requestAnimFrame(map.invalidateSize,map,!1,map._container);
});
La línea requestAniMFrame se toma de trackResize en leaflet.js
Actualización de los comentarios : Hola, utilicé map.invalidateSize (false); en lugar de L.Util.requestAnimFrame (... y esto también parece funcionar. Solo pensé en señalarlo. ¡Gran respuesta! - Herr Grumps