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

【问题标题】：Openlayers map not displaying until map div clicked, and then at wrong positionOpenlayers 地图不显示，直到地图 div 点击，然后在错误的位置
【发布时间】：2012-06-16 11:20:00
【问题描述】：

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

【问题讨论】：

标签： cordova openlayers openstreetmap

【解决方案1】：

改变你的功能

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

【讨论】：

感谢您的建议，Yogesh - 我已经更改了您标记的功能，但它似乎对我遇到的任何一个问题都没有任何影响！一条附加信息 - 当我通过点击加载地图时，它似乎确实以正确的坐标为中心 - 但它没有应用任何类型的缩放......谢谢，Giles

【解决方案2】：

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

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

【讨论】：

感谢 igorti 的建议 - 我试了一下以防万一，但我认为我没有遇到同样的问题......正如我在上面的回答中所说，看起来我有识别“第二”页上的事件的更普遍的问题，无论它是什么。可能我缺少一些明显的东西（我对这一切都很陌生！）但我会尝试一些实验来缩小范围...... :-)

【解决方案3】：

这段代码：

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

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

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

试试这个：

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

【讨论】：