Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.3k views
in Technique[技术] by (71.8m points)

jquery - Why isn't my map completely showing?

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

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>

But I was using:

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

Why there is a such difference??

My problem is the following:

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

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

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

and added this:

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

enter image description here

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

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

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...