Question

我正在尝试使用PhoneGap和JQuery Mobile在应用程序中放置OpenLayers OSM地图，但在我点击该区域或控件之前，地图将不会显示在Xcode iOS模拟器中。我已经阅读了相关问题并实施了“DeviceReady”检查，但它没有任何区别。

更重要的是，当我确实让地图出现时，它会在接近最大范围而不是放大时出现。我已经添加了对代码的警报，并且发现当警报1正确触发时，警报2不会触发。但是，如果我用.zoomToMaxExtent替换.setCenter和.zoom指令，它会（尽管地图仍然无法加载而不点击）。有人可以帮忙吗？

贾尔斯

<!DOCTYPE html> 
<html> 
<head> 
<title>My Page</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="jquery.mobilecus-1.1.0.min.css"/>
        <script src="cordova-1.8.1.js"></script>
        <script src="js/OpenLayers.js"></script>
        <script src="js/jquery-1.7.2.js"></script>
        <script src="js/jquery.mobile-1.1.0.min.js"></script>
        <script src="js/sessionstorage.1.4.js"></script>

    <script type="text/javascript" charset="utf-8">

        var map

        function init() {
            map = new OpenLayers.Map("mapholder", {maxResolution:300});
            map.addLayer(new OpenLayers.Layer.OSM());
            var lonlat = new OpenLayers.LonLat( -0.1279688 ,51.5077286 )
            .transform(
                       new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
                       map.getProjectionObject() // to Spherical Mercator Projection
                       );
            var zoom=16;
            alert ("1!");
            //map.zoomToMaxExtent; //alert 2 fires if I uncomment this and comment 
// the 2 lines below
            map.setCenter (lonlat);
            map.zoom (zoom);
            alert ("2!"); // doesn't fire with setCenter and zoom lines active, and 
// map  doesn't center or zoom either.
        }


    $(function() { //ready

    <!-- JQUERY STUFF TRIMMED -->

    }); //end ready

        function onBodyLoad(){
            document.addEventListener("deviceready",init(),false);
        }

   </script>

</head>

<body onload="onBodyLoad();"> 
<div data-role="page" id="page1" class="page">
    <!-- page 1 stuff here -->
</div><!-- /page -->

<div data-role="page" id="page2" class="page">
    <div data-role="header" data-id="fixedheader" data-position="fixed" >   
    <h1>Fixed header</h1>
    </div><!-- /header -->

    <div data-role="content">
    <div id="leftbar">
      <img src="images/leftbar.png">
    </div><!-- /leftbar -->
    <div id="mapview">
        <div id = "mapholder">
        <!-- map should load here -->
        </div>
    </div><!-- /mapview -->
    </div><!-- /content -->

    <div data-role="footer"data-id="fixedfooter" data-position="fixed">
    <a id="ForwardButton">Forward</a><a id = "BackButton" href="#page2">Back</a>
    </div><!--/footer -->
</div><!-- /page -->

</body>
</html>

好的，我尝试从头开始重建我的文件，从简单的地图视图开始并添加回其他页面组件。看起来它不是OpenLayers问题，而是与页面或div加载有关 - 我的应用程序布局在同一个html文件中有两个单独的页面，第二页上有地图，这似乎导致了问题。交换第一页上内容的地图（所以地图是你加载html时首先看到的），它运行正常 - 但是第二页上作用于div的jQuery脚本现在无法正常工作！现在我已经阐明了我将寻找解决方案的问题，并在必要时发布一个更严格定义的问题......

Answer 1

更改你的功能

  function onBodyLoad(){
      init();
      document.addEventListener("deviceready",init(),false);
  }

Answer 2

之前我遇到过同样的问题，并找到了一个有效的解决方案，但感觉有些笨拙。问题在于，由于某种原因，OpenLayers使得瓷砖不可见，因此解决方案是在地图加载时使它们可见：

$(document).delegate("#map-page", "pageshow", function() {
    $(".olLayerDiv").children("div").not(":visible").show();
});

Answer 3

此代码：

document.addEventListener("deviceready",init(),false);

立即调用init（），而不是在调度事件时传递对要调用的函数的引用。

实际上，init是在onload处理程序中调用的，而不是设备就绪处理程序，这就是你想要的。

请改为尝试：

document.addEventListener("deviceready",init,false);

Openlayers地图不会显示，直到地图div被点击，然后在错误的位置

3 个答案: