javascript - 关于移动高度问题的 Leaflet.js map

Question

我有一张 map ，我正试图将其整合到移动网络应用程序中。我对 map 的高度调整有疑问。我现在正在使用这段代码，你可以看到它看起来很难看，因为它并没有在下图中一直向下显示:

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

我也试过使用代码:

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

但是 map doe snot 与该代码一起出现，并且在 chrome inspect element 中没有报告任何错误。

Answer 1

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

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

如果您的窗口高度中包含标题，如您所附的图片所示，则在设置 map div 的高度时需要排除该标题的高度。

比如你的header有50px的高度，那么就这样设置 map 的高度

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