Leaflet.js 关于移动高度问题的地图

Question

我有一张地图，我正在尝试将其整合到移动网络应用程序中。我对地图的高度大小有疑问。我现在正在使用这段代码，你可以看到它看起来很丑，因为它并没有在下图中完全下降：

<div id="map" style="height: 400px;"></div>

我也尝试过使用代码：

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

但是该代码根本没有显示地图，并且chrome检查元素中没有报告任何错误。

Answer 1

初始化地图后，需要根据窗口高度设置地图高度

$('#map').height($(window).height()+'px');

如果您的窗口高度中包含标题，就像您附加的图像中一样，您需要在设置地图 div 的高度时排除该标题的高度。

例如，你的 header 有 50px 高度，所以这样设置地图的高度

$('#map').height($(window).height()-50+'px');