Question

我正在尝试将谷歌地图显示在jquery移动页面上。

如果我输入，地图正常工作我会直接进入浏览器中的页面。但是，当我点击另一个进入地图页面的jqm页面上的链接时，我只得到一个空白的灰色屏幕。标记实际上在那里，但它们是在视口上方和左侧的可视区域上绘制的。同样奇怪的是，我能够在画布上拖动并将标记放入左上角的一个小的，不可见的视口中（可能大约100像素宽，200像素高），但我看不到实际地图。

以下是截图：https://www.dropbox.com/s/p8berda8dbf6kh4/Screenshot%202015-05-25%2014.24.15.png?dl=0

如果我在加载失败后立即刷新页面，一切都显示正常。所以我不认为这是一个API问题。

另一个奇怪的是。如果我等待10分钟，当我点击链接查看地图时，地图将正确加载。但是下次我尝试它时无法加载。我得等几分钟。

我的代码基本上是从jquery移动网站上删除的。这是相关的代码：

<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <script src="http://maps.google.com/maps/api/js?sensor=false&key=MY_KEY"></script>

        <!-- JQM and other scripts loaded here -->

<script>
    $( document ).on( "pagecreate", "#map", function() {
    var defaultLatLng = new google.maps.LatLng(34.0983425, -118.3267434); 
    drawMap(defaultLatLng);

    function drawMap(latlng) {
      var myOptions = {
        zoom: 14,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
      new google.maps.Marker({
            position: latlng,
            map: map,
            title: "lat",
      });
      new google.maps.Marker({
         position: new google.maps.LatLng(43.150358,-74.768798),
         map: map,
         title: 'hello',
      });
    }
});
</script>

<style>
    #map, #map-canvas { width: 100%; height: 100%; padding: 0; }
</style>

   </head>
   <body>
       #calling page
       <div data-role="page" data-dom-cache="true" id="doors" data-url="doors" tabindex="0" class="ui-page ui-page-theme-a ui-page-active" style="position: relative; min-height: 559px;">
           <div role="main" class="ui-content" id="">
               <a href="#map" class="ui-btn ui-btn-inline ui-mini" id="view_map_btn" data-ajax="false">View map</a>
           </div>
       </div>

       #map page
       <div data-role="page" id="map" data-url="map" style="position: relative;">
           <div data-role="header" data-theme="a"><h1>Maps</h1></div><div role="main" class="ui-content" id="map-canvas">
           </div>
       </div>
   </body>
</html>

Answer 1

好吧，经过几个小时的撞击我的头撞墙，我终于通过从pagecreate更改为pageshow来使其工作。有趣的是，{1.4}中已弃用pageshow，并且应该被pagecontainershow替换，但pagecontainershow不起作用。

像往常一样，我会在发布问题的几分钟内找到答案。

jquery mobile中的Google地图在直接转到页面时有效，但在从其他页面导航时无效

1 个答案: