Question

我目前在让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: '&circlearrowright;' }],       {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标签中：

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

Answer 1

当您转到必须设置地图的页面时，在那里触发此行

L.Map.invalidateSize();

Leaflet和jQuery Mobile PhoneGap OnLoad问题

1 个答案: