1

PhoneGapとJQueryMobileを使用してOpenLayersOSMマップをアプリに配置しようとしていますが、領域またはコントロールをクリックするまで、マップはXcodeiOSシミュレーターに表示されません。関連する質問を読み、「DeviceReady」チェックを実装しましたが、違いはありません。

さらに、マップを表示させると、ズームインするのではなく、最大範囲に近い状態で表示されます。コードにアラートを追加しましたが、アラート1は正しく起動しますが、アラート2は起動しないことがわかりました。ただし、.setCenterおよび.zoom命令を.zoomToMaxExtentに置き換えると、置き換えられます（ただし、クリックしないとマップはロードされません）。誰か助けてもらえますか？

ジャイルズ

<!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ファイルに2つの別々のページがあり、2番目のページに地図があります。これが問題の原因のようです。マップを最初のページのコンテンツと交換すると（つまり、HTMLが読み込まれたときに最初に表示されるのはマップです）、正常に機能しますが、2番目のページの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

私は以前に同じ問題を抱えていて、うまくいく解決策を見つけましたが、少しハッキーに感じます. 問題は、何らかの理由で OpenLayers がタイルを非表示にすることです。そのため、解決策はマップの読み込み時にタイルを表示することです。

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