En mi aplicación web, quiero permitir a los usuarios establecer el tamaño del contenedor del mapa.
Todo funcionó bien cuando el contenedor se expandió ligeramente (aparentemente esto se debe a que las baldosas que estaban justo detrás del borde ya estaban cargadas). Sin embargo, cuando el contenedor se expande significativamente (en el siguiente ejemplo, de 300 a 1000 px de ancho), queda espacio en blanco.
¿Cómo volver a dibujar el mapa y adaptarlo al nuevo tamaño?
Llamar redraw()
a todas las capas no ayudó. Tampoco acercar y alejar.
Probé esto con los resultados descritos en Opera, Chrome y Firefox. En IE8, sorprendentemente, el problema no ocurrió y el mapa se adaptó automáticamente.
Una página web simplificada para probar:
<html>
<head>
<style>
#mapbox {
width: 300px;
height: 500px;
border: 1px solid black;
}
</style>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
</head>
<body>
<div id="mapbox"></div>
<input type="button" id="test" value="resize">
<script>
var map = new OpenLayers.Map('mapbox');
map.addLayer(new OpenLayers.Layer.OSM());
map.setCenter(
new OpenLayers.LonLat(1000000, 7000000), 5);
document.getElementById('test').onclick = function() {
document.getElementById('mapbox').style.width = '1000px';
}
</script>
</body>
</html>
fuente
body onload=init()
einit
inicializa el mapa. ¿Es por eso? Además, ¿sería una buena solución para un diseño receptivo?window.onload=window.onresize=function(){//resize here
. GraciassetInterval
que se ejecute cada 200 ms, luego tener un valor booleanovar didResize
que se establecetrue
onresize()
y se llama a establecerfalse
despuésmap.updateSize()
.Sí, utilice map.updateSize () como dice Vadim (que tampoco está seguro de por qué el retraso!) La documentación
Comúnmente pongo un botón de alternancia de pantalla completa en los mapas, que funciona simplemente cambiando la clase css del contenedor del mapa y luego llamando a updateSize ()
fuente
No es elegante, pero funcionó bien para mí.
fuente
Otro comentario a la primera respuesta (correcta):
El evento de tiempo de espera es necesario si espera el evento window.resize. De lo contrario, el mapa cambiará de tamaño cada milisegundo si un usuario comienza a cambiar el tamaño de la ventana (lo necesitaba para Firefox). Por lo tanto, si desea verificar el tamaño de la ventana, el tiempo de espera es bastante útil resp. necesario. Ver: /programming/5489946/jquery-how-to-wait-for-the-end-or-resize-event-and-only-then-perform-an-ac o jQuery cambiar el tamaño del evento final
(lo siento, no puedo agregar un comentario, por lo tanto, otra respuesta)
fuente
Intenté todas las cosas descritas aquí, pero nada funcionó para mí. Entonces, me di cuenta de que cuando estaba colocando una clase de 'pantalla completa' en el mapa, no se activó el evento de cambio de tamaño. Arreglo esto con:
fuente
La forma en que setTimeout se usa arriba no tiene mucho sentido para mí (tal vez una solución para una versión OL más antigua), pero setTimeout se puede usar para reducir la cantidad de llamadas a map.updateSize () y otros códigos asociados como esta:
fuente
Creo que cambiar el estilo del mapa div automáticamente cambiará el tamaño del panel del mapa.
Espero que te ayude...
fuente
Esto es trabajo para mí:
El $ nextTick es importante porque permitirá esperar la próxima actualización antes de tener en cuenta el nuevo tamaño del contenedor del mapa.
fuente