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

回答

相关问题