jquery mobile中的谷歌地图在直接进入页面时有效，但在从另一个页面导航时无效答案

【问题标题】：Google map in jquery mobile works when going directly to page but not when navigating from another pagejquery mobile中的谷歌地图在直接进入页面时有效，但在从另一个页面导航时无效
【发布时间】：2015-05-25 19:00:15
【问题描述】：

我正在尝试让谷歌地图显示在 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>

【问题讨论】：

标签： google-maps jquery-mobile

【解决方案1】：

好吧，经过数小时的头撞墙后，我终于通过将 pagecreate 更改为 pageshow 使其正常工作。有趣的是 pageshow 在 v. 1.4.5 中被弃用，应该被 pagecontainershow 取代，但 pagecontainershow 不起作用。

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

【讨论】：