W mojej aplikacji internetowej chcę umożliwić użytkownikom ustawienie rozmiaru kontenera mapy.
Wszystko działało dobrze, gdy pojemnik został nieco rozszerzony (najwyraźniej dzieje się tak, ponieważ płytki, które były tuż za granicą, były już załadowane). Jednak gdy kontener zostanie znacznie rozszerzony (w poniższym przykładzie, o szerokości od 300 do 1000 pikseli), pozostało puste miejsce.
Jak przerysować mapę i dostosować ją do nowego rozmiaru?
Wywołanie redraw()
na wszystkich warstwach nie pomogło. Przybliżanie i oddalanie też się nie zmieniło.
Testowałem to z opisanymi wynikami w Operze, Chrome i Firefox. Co zaskakujące, w IE8 problem nie wystąpił, a mapa automatycznie się dostosowała.
Uproszczona strona do testowania:
<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>
źródło
body onload=init()
iinit
inicjuje mapę. Czy to z tego powodu? Czy byłoby to dobre rozwiązanie dla responsywnego projektowania?window.onload=window.onresize=function(){//resize here
. DziękisetInterval
, który biegnie co 200 ms, a następnie mieć wartość logicznąvar didResize
, która jest ustawiona natrue
onresize()
i ustaw abyfalse
pomap.updateSize()
nazywa.Tak, użyj map.updateSize () jak mówi Vadim (też nie wiem, dlaczego opóźnienie!) Dokumentację
Zwykle umieszczam przycisk przełączania pełnoekranowego na mapach, co działa po prostu przełączając klasę css kontenera mapy, a następnie wywołując updateSize ()
źródło
Nie jest elegancki, ale działał dobrze dla mnie
źródło
Kolejny komentarz do pierwszej (poprawnej) odpowiedzi:
Limit czasu-Zdarzenie jest potrzebny, jeśli czekasz na zdarzenie window.resize. W przeciwnym razie rozmiar mapy będzie zmieniany co milisekundę, jeśli użytkownik zacznie zmieniać rozmiar okna (potrzebowałem go w przeglądarce Firefox). Dlatego jeśli chcesz sprawdzić rozmiar okna, to limit czasu jest całkiem przydatny względnie. potrzebne. Zobacz: /programming/5489946/jquery-how-to-wait-for-the-end-or-resize-event-and-only-then-perform-an-ac lub jQuery zmiana rozmiaru zdarzenia końcowego
(przepraszam, nie mogę dodać komentarza, dlatego inna odpowiedź)
źródło
Próbowałem wszystkich opisanych tutaj rzeczy, ale nic nie działało dla mnie. Uświadomiłem sobie, że kiedy umieszczałem na mapie klasę „pełnoekranową”, zdarzenie zmiany rozmiaru nie zostało uruchomione. Naprawiam to za pomocą:
źródło
Sposób użycia setTimeout powyżej nie ma dla mnie większego sensu (może to obejście dla starszej wersji OL), ale setTimeout może być użyty do zmniejszenia liczby wywołań map.updateSize () i innych powiązanych kodów, takich jak to:
źródło
myślę, że zmiana stylu div mapy automatycznie zmieni rozmiar panelu mapy.
Mam nadzieję, że Ci to pomoże...
źródło
To działa dla mnie:
$ NextTick jest ważny, ponieważ pozwoli poczekać na kolejne odświeżenie przed uwzględnieniem nowego rozmiaru kontenera mapy.
źródło