PhoneGap + JQuery Mobile + Google Maps v3: Karte zeigt die oberen linken Kacheln?
Ich habe eine PhoneGap-Anwendung, die mit JQuery mobile zwischen den Seiten navigiert.
Wenn ich von der Hauptseite zu einer Seite mit einer Google-Karte navigiere, zeigt die Karte nur eine einzelne Kachel gleichzeitig in der oberen linken Ecke an:
Was kann der Grund dafür sein?
**
%Vor%Quellcode: Das folgende Skript ist im Kopf meiner Seite
Meine Seite ist so
%Vor%Ich navigiere von zuhause zur Kartenseite wie folgt:
%Vor%Aktualisieren Nach dem Auftragen der Gajotres-Lösung werden die Fliesen wie folgt
2 Antworten
Einführung
Neuere Versionen von jQuery Mobile und Google Maps v3 sind ein bisschen speziell.
Ihr erstes Problem bestand darin, das paginit-Ereignis zur Berechnung zu verwenden. An diesem Punkt können Sie keine korrekte Seitenhöhe und -breite erhalten. Benutze stattdessen pageshow, du wirst es in meinem Beispiel finden.
Bevor Sie die Karte anzeigen, müssen Sie die Größe des Inhalts DIV ändern. Dies liegt daran, dass sich der Inhalt von div entsprechend den verfügbaren inneren Elementen ändert. Also müssen wir das manuell über JavaScript oder CSS beheben. Ich habe bereits eine Antwort auf diese Frage: < stark> Google Map nicht Vollbild nach dem Upgrade auf jquerymobile 1.2 , aber ich kann Ihnen auch ein funktionierendes Beispiel zeigen:
Arbeitsbeispiel
Arbeiten jsFiddle Beispiel: Ссылка (Javascript-Lösung, CSS-Lösung kann in einem unteren Link gefunden werden).
Code
HTML
%Vor%Javascript
Hier ist eine Funktion zur Berechnung der korrekten Seitenhöhe:
%Vor%Eine andere Lösung
Es gibt auch eine andere Lösung für dieses Problem, das nur CSS verwendet und es kann HIER . Ich bevorzuge diese Lösung, weil es kein JavaScript benötigt, um die Kartenhöhe korrekt zu korrigieren.
CSS:
%Vor%Eine letzte Sache
Auch wenn die Seitenbreite immer noch falsch ist, setzen Sie sie auf 100%:
%Vor%Ich habe seit Monaten dieses Problem gehabt, als ich meinen Kopf gegen die Wand geschlagen habe, um eine Lösung zu finden. Selbst das Festlegen der Stileigenschaften für die divs content und map-canavas löste nicht alle Probleme. google.maps.event.trigger (map, "resize") hat es auch nicht gemacht. Die Karte war jetzt Vollbild, aber immer noch zentriert in der oberen linken Ecke. Und wenn Sie Ihre Initialisierungsfunktionen auf jeder Seite aufgerufen haben, wird die Karte jedes Mal an ihre ursprüngliche Position zurückgesetzt.
Ich war in der Lage, dies auf der pageshow Event genannt und löste alle meine Probleme!
%Vor%CSS
%Vor%Hier ist mein Inhalt und Map-Canvas div.
%Vor%Er ruft das aktuelle Zentrum der Karte ab, ändert die Größe der Karte zum aktuellen div und legt dann die Kartenmitte fest. Auf diese Weise verliert die Karte ihre Position nicht, wenn der Benutzer von der Seite weg navigiert und zurückkommt.
Hoffe, das hilft.
Robert
Tags und Links android cordova jquery-mobile google-maps-api-3 jquery-mobile-pageshow