使用jquery手机时，地图不会扩展到完整大小的加载 [英] map does not expand to full size on load when using jquery mobile
问题描述
我在使用jQuery手机的页面上有一张传单图。如果我在Google Map中替换Leaflet，我会遇到类似的问题，所以我不相信这是特定于Leaflet，而是jQuery手机。
问题是，当它首次加载时，地图的背景图像不会扩展到适合包含它的div的大小。
请参阅 http://jsfiddle.net/Lxotwbrk/2/
查看红色边框是正确的大小，但地图图像在灰色区域丢失。请注意，只要调整jsfiddle页面上的结果窗口的高度或宽度（或在本地主机上运行的完整浏览器窗口），背景图像将立即填满画布。
$ b $我已经仔细阅读并尝试过类似主题的建议，但没有运气。如果我将地图放在没有JQM的页面上，我没有这个问题。
这是代码。感谢提前。
<！DOCTYPE html>
< html>
< head>
< title> no title needed< / title>
< script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js
type =text / javascript >
< / script>
< link rel =stylesheet
href =// ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.css/ >
< script src =// ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.js\"></script>
< link rel =stylesheethref =http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css/>
< script src =http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js>< / script>
< style>
html，body {
height：100％;
margin：0px;
padding：0px
}
/ *这个保存地图画布* /
.ui-content {
position：absolute;
顶部：20px;
left：0px;
right：0px;
bottom：20px;
width：100％;
padding：0px;
border：1px solid red;
}
＃map-canvas {
height：100％;
}
< / style>
< script type =text / javascript>
$（document）.on（pagecontainershow，function（event，ui）{
var map = new L.Map（'map-canvas'，{
center：[42.3， -71]，
zoom：7
}）;
L.tileLayer（'http://tiles1-4001b3692e229e3215c9b7a73e528198.skobblermaps.com/TileService/tiles/2.0/00021210101 /0/{z}/{x}/{y}.png'，{
归因：Skobbler'
}）。addTo（map）;
}）;
< / script>
< / head>
< body>
< div data-url =map-pagedata-role =pageid =map-pagedata-title =JQM的标题>
< div role =mainclass =ui-content>
< div id =map-canvas>< / div>
< / div><！ - / content - >
< / div>
< / body>
< / html>
您的＃map-canvas用div包装。他们必须允许将高度扩展到100％。
使用此...更正您的JSFiddle ...
html，body，＃map-page，＃map-canvas {
height：100％;
margin：0px;
padding：0px
}
I have a Leaflet map on a page that uses jQuery mobile. I experience a similar problem if I swap in a Google Map instead of Leaflet, so I don't believe this to be specific to Leaflet but rather to jQuery mobile.
The problem is that when it first loads, the background imagery of the map does not expand to fit the size of the div that contains it.
See http://jsfiddle.net/Lxotwbrk/2/
See that the red border is the correct size, but the map imagery is missing in the grey area. Note that as soon as you adjust the height or width of the result window on the jsfiddle page (or the full browser window if running on localhost), the background imagery immediately fills the canvas.
I have perused and tried suggestions from similar threads but haven't had luck. If I put the map on a page without JQM, I don't have this issue.
Here is the code. Thanks in advance.
<!DOCTYPE html>
<html>
<head>
<title>no title needed</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"
type="text/javascript">
</script>
<link rel="stylesheet"
href="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<style>
html, body {
height: 100%;
margin: 0px;
padding: 0px
}
/*this holds the map canvas*/
.ui-content {
position: absolute;
top: 20px;
left: 0px;
right: 0px;
bottom: 20px;
width: 100%;
padding: 0px;
border: 1px solid red;
}
#map-canvas {
height: 100%;
}
</style>
<script type="text/javascript">
$(document).on("pagecontainershow", function(event, ui) {
var map = new L.Map('map-canvas', {
center: [42.3, -71],
zoom: 7
});
L.tileLayer('http://tiles1-4001b3692e229e3215c9b7a73e528198.skobblermaps.com/TileService/tiles/2.0/00021210101/0/{z}/{x}/{y}.png', {
attribution: 'Skobbler'
}).addTo(map);
});
</script>
</head>
<body>
<div data-url="map-page" data-role="page" id="map-page" data-title="JQM's title">
<div role="main" class="ui-content">
<div id="map-canvas"></div>
</div><!-- /content -->
</div>
</body>
</html>
Your #map-canvas is wrapped with div's. They must all allow to expand the height to 100%.
Correct your JSFiddle with this ...
html, body, #map-page, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
这篇关于使用jquery手机时，地图不会扩展到完整大小的加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
