jQuery Mobile不會加載OpenLayers地圖

我開始使用jQueryMobile並希望使用OpenLayers顯示地圖。不過，我有一個奇怪的問題。這是幾乎工作的代碼。對不起，我無法做一個小提琴，但是你可以通過複製/粘貼在記事本或其他東西上輕鬆地進行測試。jQuery Mobile不會加載OpenLayers地圖

<!DOCTYPE html> 
<html> 
<head> 

<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
<script src="http://www.openlayers.org/api/OpenLayers.js"></script> 


<style type="text/css"> 
    html ,body { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
} 
.ui-content { 
    padding: 0; 
} 

#pageone, #pageone .ui-content, #basicMap { 
    width: 100%; 
    height: 100%; 
} 
</style> 
</head> 
<body> 


<div data-role="page" id="pageone"> 
    <div data-role="main" class="ui-content"> 
    <div id="basicMap"></div> 
    </div> 
</div> 

<script> 
     function init() { 
map = new OpenLayers.Map("basicMap", { 
    controls: [ 
       new OpenLayers.Control.Navigation(), 
       new OpenLayers.Control.ArgParser(), 
       new OpenLayers.Control.Attribution() 
      ] 
     }); 
var mapnik   = new OpenLayers.Layer.OSM(); 
var fromProjection = new OpenLayers.Projection("EPSG:4326"); // Transform from WGS 1984 
var toProjection = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection 
var position  = new OpenLayers.LonLat(7.55785346031189,50.3625329673905).transform(fromProjection, toProjection); 
var zoom   = 3; 

map.addLayer(mapnik); 
map.setCenter(position, zoom); 

var markers = new OpenLayers.Layer.Markers("Markers"); 
map.addLayer(markers); 

var marker = new OpenLayers.Marker(position); 

marker.events.register("click", map , function(e){ alert("click"); 
}); 

markers.addMarker(marker); 
} 


    $(document).on("pagecreate","#pageone",init()); 
</script> 

</body> 
</html>

此代碼不顯示地圖。

現在，如果你脫下以下行：

<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

你可以看到地圖顯示。

任何想法，我該如何解決這個問題？因爲我認爲它可以很容易解決，但看不到。

謝謝。

來源

2015-06-14 AshBringer

我知道這是愚蠢的，如果能有人感興趣，CSS的應該是這樣的：

#pageone, #pageone .ui-content, #basicMap { 
    width: 100%; 
    height: 100%; 
    display : block; 
}

並調用JS：

$(document).ready(init());

不但是知道爲什麼這個工程。

來源

2015-06-15 11:10:56 AshBringer

jQuery Mobile不會加載OpenLayers地圖

回答

相關問題