6

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

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

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

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

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

我也在使用 jquery(-mobile)

谢谢

4

5 回答 5

9

这是我的修复：

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();
}
于 2012-10-16T09:09:26.100 回答
5

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

html, body {
height: 100%;
}
于 2012-10-16T08:57:11.577 回答
2

如果您使用 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 */ }块中。

于 2012-10-16T21:12:05.043 回答
1

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

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

.scroll {
    height: 100%;
}

#map {
    height: 100%;
}
于 2016-09-07T13:50:10.597 回答
-1

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

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

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

于 2015-02-26T22:06:21.903 回答