为什么我的地图没有完全显示？

Question

我正在使用 Leaflet 来显示地图。我刚刚更改了 HTML 以使用 jQuery Mobile 和 Leaflet。

我阅读了 jQuery Mobile 的文档，其中说我必须添加 jQuery 1.11。

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

但我当时用的是：

<script type='text/javascript' src='js/jquery-3.1.1.min.js'></script>

为什么会有这样的差别？？

我的问题如下：

在我迁移到 jQuery Mobile 之前，我的地图完全显示在其容器中：

<div id="mapId"></div>

当我更改 HTML 代码以使用 jQuery Mobile 时，布局是一场灾难，直到我将其注释掉：

<!--  <script type='text/javascript' src='js/jquery-3.1.1.min.js'></script>-->

并添加了这个：

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

但现在我的地图没有完全显示。事实上，在调整浏览器大小之前我只能看到其中的一小部分：

调整浏览器大小后，地图完全显示。

为什么以及如何解决这个问题？为什么我无法使用最新版本的 jQuery？

Answer 1

与传单地图加载半灰色图块和相关问题相同的问题（例如，传单地图未在 bootstrap div 中显示、传单地图在选项卡式面板内未正确显示、传单地图显示灰色等） - 只需map.invalidateSize()在页面布局稳定时运行。