Google Maps kommt nicht, wenn ich die Seite von der Hauptseite per Link durchlaufe

Ich bin neu in der Entwicklung von mobilen Anwendungen und ich integriere Google Maps in meine App von jQuery mobile. Wenn ich Seiten durch Verweis auf eine HTML-Seite ändere, wird die Karte nicht angezeigt. Tatsächlich kommt es nicht in die Funktion dieser Datei.Google Maps kommt nicht, wenn ich die Seite von der Hauptseite per Link durchlaufe

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>

Bitte helfen.

Quelle

2012-04-03 Nishant

Dank JollySin‘ – Nishant

Ich habe Ihre Seiten arbeiten, indem Sie einige der Javascript neu anordnen. Dies ist, was die beiden HTML-Seiten aussehen wie jetzt:

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>

Der Grund, warum Ihr Javascript nicht vor dem Laden war, ist weil jQuery Mobile nicht das gesamte Dokument der nachfolgenden Seiten lädt. Es lädt nur das angegebene div, das das Attribut data-role = "page" enthält, oder wenn ein solches div nicht existiert, lädt es den Hauptteil des Dokuments.
Der Grund, warum es nicht den Kopf des Dokuments lädt, ist, weil es versucht, die gleichen Skripte mehrere Zeit zu laden zu vermeiden.

Hoffe, das hilft Ihnen aus.

EDIT:

in diesem Fall können Sie auch die Karte Seite in die index.html wie folgt einbetten:

<!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>

Quelle

2012-04-04 09:12:58 Falle1234

Hallo Falle, danke für deine Antwort ... Es funktioniert in einer gleichen Datei aber in Dreamweaver aber nicht in Phone Gap. und mit zwei Dateien funktioniert es immer noch nicht. Gibt es irgendeine lib oder irgendeine Konfiguration benötigt? – Nishant

Ihr Problem ist, dass JQM Ajax verwendet, um diese zweite Seite zu laden. Wenn JQM Ihre zweite Seite für die Karte abruft, sucht sie nach einer JQM-formatierten Seite (Hinweis dies ist für JQM 1.1 anders).

heißt

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

So Ihre Google Maps-Bibliothek nicht geladen zu werden. Um dies zu lösen, verschieben Sie Ihre Google Maps-Bibliothek auf diese erste Seite. Dann müssen Sie Ihren Google Maps-Code schreiben, um auf dem pageshow-Event zu starten. Dies ist wichtig, denn wenn Sie dies vor den Seiten tun, wird Ihre Karte nicht zentriert. Hier ist, wie Sie an pageshow binden.

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

Ich hoffe, das hilft. Lassen Sie es mich wissen, wenn Sie noch Hilfe benötigen.

Quelle

2012-04-04 02:48:33 codaniel

Hallo codaniel .... Dank für die Antwort n geben Sie einen Vorschlag. aber ich bekomme immer noch nicht die map von bind map initialisieren funktion nach u. in meinen obigen qus ist, wenn ich die Map-Datei laden, diese Zeit initialize() -Funktion ruft nicht auf. Es führt nur den Körperteil von map.html aus. – Nishant

Anstatt die Initialize-Funktion und Body Onload zu verwenden, binden Sie an das pageshow-Ereignis, wie ich oben zeige. – codaniel

Google Maps kommt nicht, wenn ich die Seite von der Hauptseite per Link durchlaufe

Antwort

Verwandte Themen