我正在尝试让 Leaflet map 与 PhoneGap 应用程序一起使用,但该 map 不会呈现全屏,我不确定原因。
index.html
<div data-role="content" id="map" style="width:100%;height:70%;position:absolute;">
var map = new Map();
var $map = $('#map');
$map.height( $(window).height() - $map.offset().top );
maps.js
function Map() {
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
L.marker([51.5, -0.09]).addTo(map)
.bindPopup('A pretty CSS3 popup. <br> Easily customizable.')
.openPopup();
}
但我总是在 map 位于最右侧且无法加载到其他任何地方时收到此消息:
http://postimage.org/image/r0e49wgt5/
(不让我发布有信誉的图片)
更新
如果我将应用程序横向旋转, map 将加载,但如果我保持纵向, map 将为灰色
最佳答案
显示 map 后尝试 map.invalidateSize();
。
关于cordova - PhoneGap + Leaflet + Jquery Mobile,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14778755/