无法为 openlayers 地图设置地图的 div 高度答案

【问题标题】：Cannot set map's div height for openlayers map无法为 openlayers 地图设置地图的 div 高度
【发布时间】：2016-09-07 21:50:10
【问题描述】：

此代码使地图的 div 宽度最大但高度为 0（% 值无关紧要，它始终为 0）

<div id="map" style="width: 100%; height: 100%;"></div>

这很有效，因为它将地图的 div 设置为固定大小，但显然不是我想要的。

<div id="map" style="width: 100%; height: 500px;"></div>

有人经历过吗？有人建议如何解决这个问题吗？

我也在使用 jquery(-mobile)

谢谢

【问题讨论】：

标签： openlayers

【解决方案1】：

这是我的解决方法：

function fixContentHeight(){
    var viewHeight = $(window).height();
    var header = $("div[data-role='header']:visible:visible");
    var navbar = $("div[data-role='navbar']:visible:visible");
    var content = $("div[data-role='content']:visible:visible");
    var contentHeight = viewHeight - header.outerHeight() - navbar.outerHeight();
    content.height(contentHeight);
    map.updateSize();
}

【讨论】：

基本上，改变#map的大小然后调用该死的map.updateSize();

【解决方案2】：

您需要为 HTML 和 Body 提供 100% 的高度：

html, body {
height: 100%;
}

【讨论】：

但是地图 div 本身仍然需要真正的 px 值而不是百分比。
这对我有用，还设置了#map {width:100%;高度：100%;}

【解决方案3】：

如果您使用 jquery，这可以完美地将您的地图“拉伸”到持有它的容器 div，无论您的 css 为地图设置了什么：

   $(window).resize(function () {
      //$('#log').append('<div>Handler for .resize() called.</div>');
         var canvasheight=$('#map').parent().css('height');
         var canvaswidth=$('#map').parent().css('width');

         $('#map').css("height", canvasheight);
         $('#map').css("width", canvaswidth);

   });

顺便说一句，最好在 $(document).ready(function(){ /* here */ } 块中调用它。

【讨论】：

【解决方案4】：

我遇到这个话题是因为我想将离子选项卡 (ionicframework) 中的地图高度设置为 100%。即使这不是最初的问题，也可能其他人遇到同样的问题。除了前面的建议，您还必须将 .scroll 类的高度设置为 100%：

html, body {
    width: 100%;
    height: 100%;
}

.scroll {
    height: 100%;
}

#map {
    height: 100%;
}

【讨论】：

对于和上面有同样问题的，只需设置你的并且不需要更多的 CSS

【解决方案5】：

我通过添加以下内容为我的用例解决了这个问题：

setInterval(function(){map.updateSize();}, 500);

更新：这不是我在 OpenLayers 3 下所做的事情。我在使用 OpenLayers 2 时这样做了。我并不是说它很漂亮，但它足以满足我的需要。

【讨论】：

这很浪费，因为您每 500 毫秒运行一次此代码。这不是你真正想要做的。请参阅我或格伦的答案以获得更清洁的方式
它没有设置地图的大小，地图会变形。
@olga 也许你正在使用 OL3？我的方法对 OL2 完全有效。