jQuery Mobile 和 Google Maps API - 地图未加载到设备上

Question

我正在构建一个移动应用程序，它是一个活动程序。我想链接到在谷歌地图上显示活动位置的页面，但不知道如何让它工作。

当您直接链接到页面（或重新加载页面）时，它会在浏览器和设备上正常加载，但是当我通过应用程序访问页面时，地图不会出现。我很确定这与通过 ajax 加载的页面有关。

任何帮助将不胜感激。

我已经尝试了一些东西，但这是我当前的代码：

<!doctype html>
<html class="">
<head>
    <meta name="apple-mobile-web-app-capable" content="yes" /> 
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8">
    <title></title>
    <link href="css/style.css" rel="stylesheet">
    <script src="js/jquery-1.10.2.min.js"></script>

    <script src="js/jquery.mobile-1.3.2.min.js"></script>

    <link href="css/jquery.mobile.structure-1.3.2.min.css" rel="stylesheet">

    <style>
      html, body, #map-canvas {
        margin: 0;
        padding: 0;
        height: 100%;
      }

    </style>

    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

    <script>
        $(document).on("pageinit", "#map", function() {
                initialize();
          });

      var map;
        function initialize() {
          var mapOptions = {
            zoom: 17,
            center: new google.maps.LatLng(-27.617745,153.086779),
            mapTypeControl: false,
            zoomControl: false,
            panControl: false,
            streetViewControl: false,
            mapTypeId: google.maps.MapTypeId.SATELLITE
          };
          map = new google.maps.Map(document.getElementById('map-canvas'),
              mapOptions);
        }
    </script>
</head>
<body>


<div data-role="page" id="map">
  <div id="header" data-role="header">
    <a href="#" data-rel="back" >< Back</a>
  </div>
  <div data-role="content">
    <div id="map-content">
      <div id="map-canvas"></div>
    </div>
  </div>
</div>



</body>
</html>

Answer 1

您是否尝试过使用页面创建事件而不是 pageinit 事件？

$(document).on("pagecreate", "#map", function() {
            initialize();
      });