jquery - 为什么我的 map 没有完全显示？

Question

我正在使用 Leaflet 来显示 map 。
我只是将 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 之前，我的 map 完全显示在其容器中:

<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>

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



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

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

Answer 1

与 Leaflet map loading half greyed tiles 相同的问题和相关问题(例如 Leaflet Map not showing in bootstrap div 、 Leaflet map not displayed properly inside tabbed panel 、 leaflet map shows up grey 等) - 只需运行 map.invalidateSize()当您的页面布局稳定时。