Dalam aplikasi web saya, saya ingin memungkinkan pengguna untuk mengatur ukuran wadah peta.
Semuanya bekerja dengan baik ketika wadah sedikit diperluas (tampaknya ini karena ubin yang berada tepat di belakang perbatasan sudah dimuat). Namun, ketika wadah diperluas secara signifikan (dalam contoh berikut, dari 300 hingga 1000px lebar), ada ruang kosong yang tersisa.
Bagaimana cara membuat peta ulang dan beradaptasi dengan ukuran baru?
Memanggil redraw()
semua lapisan tidak membantu. Zooming tidak masuk dan keluar.
Saya menguji ini dengan hasil yang dijelaskan di Opera, Chrome dan Firefox. Di IE8, secara mengejutkan, masalah tidak terjadi dan peta secara otomatis disesuaikan.
Laman web yang disederhanakan untuk pengujian:
<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>
body onload=init()
daninit
menginisialisasi peta. Apakah karena itu? Juga, apakah ini akan menjadi solusi yang baik untuk desain responsif?window.onload=window.onresize=function(){//resize here
. Terima kasihsetInterval
yang berjalan setiap 200 ms, kemudian memiliki booleanvar didResize
yang diatur ketrue
onresize()
, dan diatur kefalse
setelahmap.updateSize()
dipanggil.Ya, menggunakan map.updateSize () sebagai Vadim mengatakan (juga tidak yakin mengapa penundaan!) Dokumentasi
Saya biasanya meletakkan tombol toggle layar penuh pada peta, yang berfungsi hanya dengan mengganti kelas css dari wadah peta dan kemudian memanggil updateSize ()
sumber
Tidak elegan, tetapi itu bekerja dengan baik untuk saya
sumber
Komentar lain untuk jawaban pertama (benar):
Timeout-Event diperlukan jika Anda menunggu window.resize event. Kalau tidak, peta akan diubah ukurannya setiap milidetik jika pengguna mulai mengubah ukuran jendela (saya membutuhkannya untuk Firefox). Karena itu jika Anda ingin memeriksa ukuran Window, maka batas waktu resp sangat berguna. dibutuhkan. Lihat: /programming/5489946/jquery-how-to-wait-for-the-end-or-resize-event-and-only-then-perform-an-ac atau jQuery mengubah ukuran acara akhir
(maaf, saya tidak bisa menambahkan komentar, karena itu jawaban lain)
sumber
Saya mencoba semua hal yang dijelaskan di sini tetapi tidak ada yang berhasil untuk saya. Jadi, saya menyadari bahwa ketika saya meletakkan kelas 'layar penuh' ke peta, acara pengubahan ukuran tidak dipecat. Saya memperbaikinya dengan:
sumber
Cara setTimeout digunakan di atas tidak masuk akal bagi saya (mungkin solusi untuk versi OL yang lebih lama), tetapi setTimeout dapat digunakan untuk mengurangi jumlah panggilan ke map.updateSize (), dan kode terkait lainnya seperti ini:
sumber
Saya pikir mengubah gaya div peta secara otomatis akan mengubah ukuran panel peta.
Saya harap ini membantu Anda ...
sumber
Ini bekerja untuk saya:
$ NextTick penting karena akan memungkinkan untuk menunggu refresh berikutnya sebelum memperhitungkan ukuran baru dari wadah peta.
sumber