Question

我是移动应用程序开发的新手，我正在通过jQuery mobile在我的应用程序中集成Google Maps。当我通过提供对html页面的引用来更改页面时，它没有显示地图。事实上，它并没有涉及该文件的功能。

map.html：

   <!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 100%;}
    </style>
    <script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBUuNWrZ1zjJ7yKV3DJL2ylrhj9BAcYo8A&sensor=true&language=ka">
    </script>
    <script type="text/javascript">
     function initialize() {
         alert("map");
        var myOptions = {
          center: new google.maps.LatLng(17.38504, 78.48667),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"),
            myOptions);
      }
   </script>

  </head>
  <body onload="initialize()">
    <div id="map_canvas" style="width:100%; height:100%"></div>

  </body>
</html>

的index.html：

<!DOCTYPE html>
<head>
<title>Untitled Document</title>
        <meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
</head>
<body >
    <div data-role="page" data-theme="b" data-fullscreen="true">
        <div data-role="header" >
            <h1>Home</h1>
        </div>
        <div data-role="content" data-theme="a">
            <div class="ui-grid-b">
                <a href="src/contact.html" ><img src="iphone-contacts-icon.jpg" width="72" height="72"  hspace="10" vspace="20"/></a>
                <a href="src/map.html"><img src="Maps-icon.png" width="72" height="72" hspace="10" vspace="20"/></a>
                <a><img src="ExamIcon.jpg" width="72" height="72" hspace="10" vspace="20"/></a>
            </div><!-- /grid-b -->

</div><!-- Content-->
        <div data-role="footer" >
            <h1>footer</h1>
        </div>  <!-- footer-->
    </div>  <!-- page-->


</body>
</html>

请帮忙。

Answer 1

您的问题是JQM使用ajax加载第二页。当JQM获取地图的第二页时，它正在寻找JQM格式的页面（注意这与JQM 1.1不同）。

即

<div data-role="page">
    <div data-role="header">
        <h1>Header</h1>
    </div>
    <div data-role="content">
        <div id="map_canvas"></div>
    </div>
</div>

所以你的谷歌地图库没有加载。要解决此问题，请将您的Google地图库移至第一页。然后，您需要编写您的Google地图代码，以便在pageshow事件中开始。这很重要，因为如果您在页面显示之前执行此操作，则您的地图将偏离中心。以下是如何绑定到pageshow。

$(document).delegate('#mapPage', 'pageshow', function(){
    var myOptions = {
          center: new google.maps.LatLng(17.38504, 78.48667),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
            myOptions);
});

我希望这会有所帮助。如果您仍需要帮助，请告诉我。

Answer 2

我通过重新安排一些javascript让你的页面正常工作。这就是现在两个html页面的样子：

<强>的index.html

<!DOCTYPE html>
<head>
<title>Untitled Document</title>
        <meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBUuNWrZ1zjJ7yKV3DJL2ylrhj9BAcYo8A&sensor=true&language=ka">
    </script>
    <script type="text/javascript">

      $('#Map').live("pageinit", function (event) {
         alert("map");
        var myOptions = {
          center: new google.maps.LatLng(17.38504, 78.48667),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"),
            myOptions);
      });
   </script>
</head>
<body >
    <div data-role="page" data-theme="b" data-fullscreen="true">
        <div data-role="header" >
            <h1>Home</h1>
        </div>
        <div data-role="content" data-theme="a">
            <div class="ui-grid-b">
                <a href="src/contact.html" ><img src="iphone-contacts-icon.jpg" width="72" height="72"  hspace="10" vspace="20"/></a>
                <a href="map.html"><img src="Maps-icon.png" width="72" height="72" hspace="10" vspace="20"/></a>
                <a><img src="ExamIcon.jpg" width="72" height="72" hspace="10" vspace="20"/></a>
            </div><!-- /grid-b -->

</div><!-- Content-->
        <div data-role="footer" >
            <h1>footer</h1>
        </div>  <!-- footer-->
    </div>  <!-- page-->


</body>
</html>

<强> map.html

 <!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  </head>
  <body onload="initialize()">

    <div data-role="page" id="Map">
        <style type="text/css">
      html { height: 100%; width: 100%; }
      body { height: 100%; width: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 100%; width: 100%; }
      #Map { height: 100%; width: 100%; }
    </style>
        <div id="map_canvas" style="width:100%; height:100%"></div>
    </div>
  </body>
</html>

之前没有加载javascript的原因是因为jQuery Mobile没有加载后续页面的整个文档。它只加载包含属性data-role =“page”的指定div，或者如果这样的div不存在，它会加载文档的正文。
它没有加载文档头部的原因是它试图避免多次加载相同的脚本。

希望这可以帮助你。

编辑：

在这种情况下，您还可以将地图页面嵌入到index.html中，如下所示：

<!DOCTYPE html>
<head>
<title>Untitled Document</title>
        <meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBUuNWrZ1zjJ7yKV3DJL2ylrhj9BAcYo8A&sensor=true&language=ka">
    </script>
    <script type="text/javascript">

      $('#Map').live("pageinit", function (event) {
         alert("map");
        var myOptions = {
          center: new google.maps.LatLng(17.38504, 78.48667),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"),
            myOptions);
      });
   </script>
</head>
<body >
    <div data-role="page" data-theme="b" data-fullscreen="true">
        <div data-role="header" >
            <h1>Home</h1>
        </div>
        <div data-role="content" data-theme="a">
            <div class="ui-grid-b">
                <a href="src/contact.html" ><img src="iphone-contacts-icon.jpg" width="72" height="72"  hspace="10" vspace="20"/></a>
                <a href="#Map"><img src="Maps-icon.png" width="72" height="72" hspace="10" vspace="20"/></a>
                <a><img src="ExamIcon.jpg" width="72" height="72" hspace="10" vspace="20"/></a>
            </div><!-- /grid-b -->

</div><!-- Content-->
        <div data-role="footer" >
            <h1>footer</h1>
        </div>  <!-- footer-->
    </div>  <!-- page-->

    <div data-role="page" id="Map">
        <style type="text/css">
      html { height: 100%; width: 100%; }
      body { height: 100%; width: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 100%; width: 100%; }
      #Map { height: 100%; width: 100%; }
    </style>
        <div id="map_canvas" style="width:100%; height:100%"></div>
    </div>
</body>
</html>

当我从主页面逐页传输页面时，Google地图不会出现

2 个答案: