我在 <div>
中显示了一个 openlayers map html页面中的标记。我使用 CSS 样式通过定义 map 划分的类来分配 map 尺寸。
<div id="map" class="largemap"></div>
在哪里
.largemap {
width: 1200px;
height: 600px;
border: 1px solid #ccc;
}
我想根据用户的窗口大小动态更改 map 尺寸,因此我创建了一个样式元素并使用 javascript 将这个新类分配给 map 分区:
var mapElement = document.getElementById("map");
var sheet = document.createElement('style');
var newHeight = viewportheight-400; // previously acquired - working OK
var newWidth = viewportwidth-200; // previously acquired - working OK
var styleHTML = ".custommap { width: "+newWidth+"px; height: "+newHeight+"px; border: 1px solid #ccc;}";
sheet.innerHTML = styleHTML;
document.body.appendChild(sheet);
mapElement.className = "custommap";
发生了 2 件意想不到的事情:
只需将样式附加到文档即可更改 map 划分的类;
map 划分仍然使用“旧”边界(在缩放时未正确居中);
谁能推荐一个更有效的策略来动态定义 openlayers 中的视口(viewport)?
最佳答案
更改容器大小后,您必须更新 map 大小并重新计算边界:
map.updateSize();
map.calculateBounds();
可以查看OL文档http://dev.openlayers.org/docs/files/OpenLayers/Map-js.html#OpenLayers.Map.updateSize
关于javascript - Openlayers动态视口(viewport)宽度和高度分配,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27274300/