【发布时间】：2015-08-17 01:24:21
【问题描述】：
我目前在让 Leaflet 与 jQuery Mobile / PhoneGap 很好地配合使用时遇到问题。我在我的移动应用程序的第二页上创建了一个带有我自己的自定义图块的地图。当我转到该页面时，地图位于容器的左上角，如果我放大，大多数图块都丢失了。如果我在浏览器中测试时刷新页面，它会加载得很好。
这让我相信脚本启动得太早了，我通过将地图页面作为加载到应用程序中的第一个 div 进行了测试，并且一切正常 - 但是这对于设计来说并不理想。我认为问题在于我如何在 body 标记中使用 onLoad="init()"。
这是地图的脚本：
<link rel="stylesheet" href="css/leaflet.css" />
<script src="js/leaflet.js"></script>
<script>
function init() {
var mapMinZoom = 0;
var mapMaxZoom = 3;
var map = L.map('map', {
maxZoom: mapMaxZoom,
minZoom: mapMinZoom,
crs: L.CRS.Simple
}).setView([0, 0], mapMaxZoom);
var mapBounds = new L.LatLngBounds(
map.unproject([0, 1536], mapMaxZoom),
map.unproject([1536, 0], mapMaxZoom));
map.fitBounds(mapBounds);
L.tileLayer('tiles/{z}/{x}/{y}.jpg', {
minZoom: mapMinZoom, maxZoom: mapMaxZoom,
bounds: mapBounds,
attribution: 'Fraser Island',
noWrap: true
}).addTo(map);
}
</script>
<style>
html, body, #map { width:100%; height:480px; margin:0; padding:0; }
</style>
这是直到地图页面的正文代码：
<body onLoad="init()">
<!--Home Page Start-->
<div data-role="page" id="Home">
<div data-role="header" data-theme="b">
<a href="#Home" class="button" data-icon="home">Home</a>
<h1>Home Screen</h1>
</div>
<div></div>
<div data-role="content">
<center><div class="ui-grid-a" >
<div class="ui-block-a"><center><a href="#CustomMap"><img src="img/map_button.png" width="66" height="69" alt=""/></a><br>Map</center>
</div>
</div></center>
</div>
</div>
<!--Home Page End-->
<!--Map Page Start-->
<div data-role="page" id="CustomMap">
<div data-role="header">
<a href="#Home" class="button" data-icon="home">Home</a>
<h1>Map</h1>
</div>
<div data-role="content">
<div id="map" style="width: 100%; height: 480px"></div>
</div>
</div>
<!--Map Page End-->
任何帮助将不胜感激！
更新
因此，根据反馈，我发现它在 Android 4.4.2 之前的 Android 设备上运行，但在 4.4.2 上无法运行 - 不知道为什么它在 4.4.2 上无法运行
问题仍然存在，如果我刷新页面，地图可以正常工作，但在首次加载时无法正常工作。现在，我通过在加载页面后立即重新加载页面来包含一个小的解决方法。在执行此操作时，我设法让标记保持工作，因此使用此解决方法一切都按预期运行，但我仍然希望让它在第一次加载时工作。
这是更新后的脚本：
放在</head>之前：
<link rel="stylesheet" href="css/leaflet.css" />
<script src="js/leaflet.js"></script>
<script src="js/FunctionButton.js"></script>
<script src="js/marker.js"></script>
<script>
var curMark = localStorage.getItem("mark");
var map;
function init() {
var mapMinZoom = 0;
var mapMaxZoom = 3;
map = L.map('map', {
maxZoom: mapMaxZoom,
minZoom: mapMinZoom,
crs: L.CRS.Simple
}).setView([0, 0], mapMaxZoom);
document.getElementById('map').style.display = 'block';
var mapBounds = new L.LatLngBounds(
map.unproject([0, 2048], mapMaxZoom),
map.unproject([2048, 0], mapMaxZoom));
map.fitBounds(mapBounds);
L.tileLayer('tiles/{z}/{x}/{y}.jpg', {
minZoom: mapMinZoom, maxZoom: mapMaxZoom,
bounds: mapBounds,
attribution: 'Fraser Island',
noWrap: true
}).addTo(map);
var btn = L.functionButtons([{ content: '↻' }], {position: 'topright'});
btn.on('clicked', function(data) {
if( data.idx == 0 ) {
location.reload();
};
});
map.addControl(btn);
map.on('click', function(e) {
<!--alert("Lat, Lon : " + e.latlng.lat + ", " + e.latlng.lng)
});
var micon = L.icon({
iconUrl: 'img/marker_hole.png',
iconSize: [25,41],
iconAnchor: [12,35],
popupAnchor: [0,-35]
});
var mark1 = new marker(-109.875, 111.75, micon, map);
var mark2 = new marker(-51, 126.375, micon, map);
var mark3 = new marker(-77.625, 140.75, micon, map);
var mark4 = new marker(-92.875, 120.875, micon, map);
var mark5 = new marker(-107.625, 132.375, micon, map);
var mark6 = new marker(-134.125, 121.25, micon, map);
var mark7 = new marker(-145.875, 107.875, micon, map);
var mark8 = new marker(-147.625, 100, micon, map);
var mark9 = new marker(-167.5, 103.75, micon, map);
var mark10 = new marker(-183.625, 105.375, micon, map);
var marks = [mark1,
mark2,
mark3,
mark4,
mark5,
mark6,
mark7,
mark8,
mark9,
mark10
];
if (curMark !== null){
var cm = curMark.split(",")
var zoomAt = new L.LatLng(cm[0],cm[1])
map.setView(zoomAt, 3)
localStorage.removeItem("mark")
for (i=0; i < marks.length; i++){
if (marks[i].getLatLng() == zoomAt.toString()){
}
else{
marks[i].remove();
}
}
}
L.Util.requestAnimFrame(map.invalidateSize,map,!1,map._container);
}
$(window).load(init);
function goToMap(markId){
localStorage.setItem("mark", markId);
}
</script>
在正文标签中：
<body onbeforeunload="return window.location.reload(true)">
地图页面的div：
<!--Map Page Start-->
<div data-role="page" id="FraserMap">
<div data-role="header">
<a href="#Home" class="button" data-icon="home">Home</a>
<h1>Map</h1>
</div>
<div data-role="content">
<div id="map">
<script>
$('#FraserMap').bind('pageshow', function(){
if (!localStorage.getItem("reload")) {
localStorage.setItem("reload", "true");
location.reload();
}
else {
localStorage.removeItem("reload");
}
if (!localStorage.getItem("mark")) {
}
else {
curMark = localStorage.getItem("mark");
}
});
</script>
</div>
</div>
</div>
<!--Map Page End-->
【问题讨论】：
-
为什么不用jQuery来调用onload。
$(window).load(init);看看有没有帮助 -
这对我的部分解决方案有所帮助，它适用于 4.4.2 之前的设备，但不适用于 4.4.2 版本的 android。使用新脚本更新帖子。
标签： jquery cordova jquery-mobile leaflet