Question

我在html页面的<div>标记中显示了一个openlayers地图。我使用css样式通过定义地图分区的类来分配地图尺寸。

<div id="map" class="largemap"></div>

，其中

.largemap {
  width: 1200px;
  height: 600px;
  border: 1px solid #ccc;
}

我想根据用户的窗口大小动态更改地图尺寸，所以我创建了一个样式元素，并使用javascript将这个新类分配给地图分区：

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件意想不到的事情：

只需将样式附加到文档即可更改地图分区的类别;
地图部门仍然使用＆＃34; old＆＃34;边界（在缩放时不能正确居中）;

任何人都可以推荐一种更有效的策略来动态定义openlayers中的视口吗？

Answer 1

更改容器大小后，您必须更新地图大小并重新计算边界：

map.updateSize();
map.calculateBounds();

您可以查看OL文档http://dev.openlayers.org/docs/files/OpenLayers/Map-js.html#OpenLayers.Map.updateSize

Openlayers动态视口宽度和高度分配

1 个答案: