为什么我的地图没有完全显示? [英] Why isn't my map completely showing?

问题描述

我正在使用Leaflet显示地图. 我只是将HTML更改为使用jQuery Mobile和Leaflet.

I am using Leaflet to display a map. I just changed my HTML to use jQuery Mobile and Leaflet.

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

I read the documentation for jQuery Mobile, which says I have to add 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>

为什么会有这样的区别?

Why there is a such difference??

我的问题如下:

在我使用jQuery Mobile之前，我的地图已完全显示在其容器中:

Before I moved to jQuery Mobile, my map was fully displaying in its container:

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

当我将HTML代码更改为使用jQuery Mobile时，在我将其注释掉之前，布局是一个灾难:

When I changed my HTML code to use jQuery Mobile, the layout was a disaster until I commented this out:

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

但是现在我的地图没有完全显示.实际上，在调整浏览器大小之前，我只看到了很小一部分:

But now my map is not fully displaying. In fact I only see a very small part of it until I resize the browser:

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

After I resized the browser, the map is displaying fully.

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

Why and how can I solve this problem? Why can't I use the latest version of jQuery?

推荐答案

与传单地图加载半灰色的瓷砖和相关问题(例如，传单地图显示灰色等)-当页面布局稳定时，只需运行map.invalidateSize().

Same problem as in Leaflet map loading half greyed tiles and related questions (e.g. Leaflet Map not showing in bootstrap div, Leaflet map not displayed properly inside tabbed panel, leaflet map shows up grey, etc etc) - just run map.invalidateSize() when your page layout is stable.

这篇关于为什么我的地图没有完全显示?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！