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

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

与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()。