1

我正在尝试使用 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 脚本现在不起作用！现在我已经澄清了这个问题，我将寻找解决方案，如有必要，发布一个更严格定义的问题......

4

3 回答 3

1

改变你的功能

  function onBodyLoad(){
      init();
      document.addEventListener("deviceready",init(),false);
  }
于 2012-06-16T11:59:20.670 回答
0

这段代码：

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

立即调用 init()，而不是在分派事件时传递对要调用的函数的引用。

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

试试这个：

document.addEventListener("deviceready",init,false);
于 2013-03-14T05:12:04.307 回答
0

我以前遇到过同样的问题，并找到了一个可行的解决方案，但感觉有点hacky。问题是由于某种原因 OpenLayers 使图块不可见，因此解决方案是在地图加载时使它们可见：

$(document).delegate("#map-page", "pageshow", function() {
    $(".olLayerDiv").children("div").not(":visible").show();
});
于 2012-06-17T09:45:08.413 回答