Карты Google не приходят, когда я перехожу страницу с главной страницы по ссылке - PullRequest
Новая
       9

Карты Google не приходят, когда я перехожу страницу с главной страницы по ссылке

0 голосов
/ 03 апреля 2012

Я новичок в разработке мобильных приложений, и я интегрирую Google Maps в свое приложение от jQuery mobile.Когда я меняю страницы, давая ссылку на 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>

Пожалуйста, помогите.

Ответы [ 2 ]

0 голосов
/ 04 апреля 2012

Я заставил ваши страницы работать, переставив часть 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 не загружает весь документ последующих страниц.Он загружает только указанный div, содержащий атрибут data-role = "page", или, если такого 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>
0 голосов
/ 04 апреля 2012

Ваша проблема в том, что JQM использует ajax для загрузки второй страницы. Когда JQM получает вашу вторую страницу для карты, он ищет страницу в формате JQM ( note это отличается для 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 Maps на эту первую страницу. Затем вам нужно написать свой код Google Maps, чтобы начать на мероприятии pagehow. Это важно, потому что если вы сделаете это до показа страниц, ваша карта будет вне центра. Вот как можно привязать к pagehow. 

$(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);
});

Надеюсь, это поможет. Дайте мне знать, если вам все еще нужна помощь.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...