jQuery Mobile不會加載OpenLayers Map

Question

我從jQueryMobile開始，想使用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>

您可以看到地圖正在顯示。

關於如何解決這個問題的任何想法嗎？ 因為我認為可以輕松解決，但看不到如何解決。

謝謝。

Answer 1

我知道這很愚蠢，如果它可以引起某人的興趣，那么CSS應該像這樣：

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

並調用JS：

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

但是不知道為什么會這樣。

jQuery Mobile不會加載OpenLayers Map

問題描述

1 個解決方案

解決方案1
0 已采納 2015-06-15 11:10:56

jQuery Mobile不會加載OpenLayers Map

問題描述

1 個解決方案

解決方案1 0 已采納 2015-06-15 11:10:56

解決方案1
0 已采納 2015-06-15 11:10:56