No meu aplicativo da web, desejo permitir que os usuários definam o tamanho do contêiner de mapa.
Tudo funcionou bem quando o contêiner foi expandido levemente (aparentemente, porque os ladrilhos que estavam logo atrás da borda já estavam carregados). No entanto, quando o contêiner é expandido significativamente (no exemplo a seguir, de 300 a 1000 px de largura), resta espaço em branco.
Como fazer o mapa redesenhar e se adaptar ao novo tamanho?
Chamar redraw()
todas as camadas não ajudou. Nem zoom in e out.
Eu testei isso com os resultados descritos no Opera, Chrome e Firefox. Surpreendentemente, no IE8, o problema não ocorreu e o mapa foi adaptado automaticamente.
Uma página da web simplificada para teste:
<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>
fonte
body onload=init()
einit
inicializa o mapa. É por isso? Além disso, essa seria uma boa solução para o design responsivo?window.onload=window.onresize=function(){//resize here
. GraçassetInterval
que seja executado a cada 200 ms e, em seguida, ter um booleanovar didResize
definido comotrue
onresize()
e definido comofalse
depoismap.updateSize()
.Sim, usar map.updateSize () como diz Vadim (também não sei por que o atraso!) Documentação
Costumo colocar um botão de alternância de tela cheia nos mapas, que funciona simplesmente alternando a classe css do contêiner de mapa e depois chamando updateSize ()
fonte
Não é elegante, mas funcionou bem para mim
fonte
Outro comentário para a primeira resposta (correta):
O timeout-Event é necessário se você esperar pelo evento window.resize. Caso contrário, o mapa será redimensionado a cada milissegundo se um usuário começar a redimensionar a janela (eu precisava dele para o Firefox). Portanto, se você deseja verificar o tamanho da janela, o tempo limite é bastante útil. necessário. Consulte: /programming/5489946/jquery-how-to-wait-for-the-end-or-resize-event-and-only-then-perform-an-ac ou jQuery redimensionar o evento final
(desculpe, não posso adicionar um comentário, portanto, outra resposta)
fonte
Eu tentei todas as coisas descritas aqui, mas nada funcionou para mim. Então, percebi que quando eu colocava uma classe 'tela cheia' no mapa, o evento de redimensionamento não era disparado. Corrijo isso com:
fonte
A maneira como setTimeout é usado acima não faz muito sentido para mim (talvez uma solução alternativa para uma versão OL mais antiga), mas setTimeout pode ser usado para reduzir o número de chamadas para map.updateSize () e outros códigos associados, como isto:
fonte
Eu acho que mudar o estilo do mapa div automaticamente mudará o tamanho do painel do mapa.
espero que ajude você ...
fonte
Isso está funcionando para mim:
O $ nextTick é importante porque permitirá aguardar a próxima atualização antes de levar em conta o novo tamanho do contêiner de mapa.
fonte