Trong ứng dụng web của mình, tôi muốn cho phép người dùng đặt kích thước của vùng chứa bản đồ.
Mọi thứ hoạt động tốt khi container được mở rộng một chút (rõ ràng điều này là do các gạch ngay phía sau đường viền đã được tải). Tuy nhiên, khi vùng chứa được mở rộng đáng kể (trong ví dụ sau, chiều rộng từ 300 đến 1000px), có khoảng trống còn lại.
Làm thế nào để làm cho bản đồ vẽ lại và thích ứng với kích thước mới?
Gọi redraw()tất cả các lớp đã không giúp đỡ. Không phóng to và thu nhỏ.
Tôi đã thử nghiệm điều này với các kết quả được mô tả trong Opera, Chrome và Firefox. Trong IE8, đáng ngạc nhiên, sự cố đã không xảy ra và bản đồ tự động điều chỉnh.
Một trang web đơn giản để thử nghiệm:
<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>