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

Question

我正在尝试将地图合并到移动网络应用中。我对地图的高度大小有问题。我现在正在使用此代码，你可以看到它看起来很难看，因为它并没有在下面的图片中一直显示：

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

我也尝试过使用代码：

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

但是地图上的所有内容都显示在该代码中，并且chromes inspect元素中没有报告错误。

Answer 1

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

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

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

例如，您的标题高度为50px，因此以这种方式设置地图的高度

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