Wie kann ich eine Vollbild-Google-Karte mit jQuery Mobile anzeigen?

7

Der folgende Code zeigt eine merkwürdige Ausgabe an. Ich sollte eine Vollbild-Handykarte sehen. Aber aus irgendeinem Grund zeigt es nur auf einem Teil des Bildschirms. Ich verwende jquery.ui.map für die Zuordnung.

%Vor%

Ausgabe:

Vielen Dank im Voraus.

    
Shahjalal 02.05.2012, 00:33
quelle

4 Antworten

22

Die Lösung für meine mobile Website bestand darin, die Stile position:absolute; width:100%; height:100%; für das Canvas div festzulegen. Sie können die Stile top und bottom verwenden, um Platz für Symbolleisten zu lassen.

    
Dmitry S. 02.05.2012, 00:48
quelle
1

Kopf- und Fußzeile sind unvermeidbar, wenn Sie jQuery verwenden. Ich setze {data-position="fixed" data-fullscreen="true"} für Kopf- und Fußzeile und setze auch html { height: 100% } body { height: 100%; margin: 0; } #map { position:absolute; width: 100%; height: 100%; padding: 0; } , damit sowohl das Menü als auch die Karte auf dem mobilen Gerät perfekt zusammenarbeiten.

    
Energetic Codfish 25.07.2014 17:02
quelle
0

Der Container und der Kartenbereich müssen 100% Breite und Höhe haben.

Von der jQuery-Website aus ist ihre Struktur:

%Vor%

Und das CSS:

%Vor%

Von hier: Ссылка

    
Simon Kelly 01.06.2013 11:49
quelle
0

Ich habe ein bisschen damit herumgespielt und es geschafft, die perfekte Lösung zu finden. Es behandelt Seiten mit oder ohne Kopfzeile. Es positioniert die Karte perfekt in dem Abstand zwischen der Kopfzeile und dem unteren Rand der Seite (oder auf der ganzen Seite, wenn keine Kopfzeile vorhanden ist) für jede Auflösung und Kopfzeilenhöhe.

Diese Lösung erfordert CSS und JS, wenn die Seite eine Kopfzeile hat, und CSS nur, wenn die Seite keine Kopfzeile hat.

HTML

%Vor%

CSS

%Vor%

JS

%Vor%     
Liran H 19.07.2015 19:22
quelle

Tags und Links

Django: Verwenden von Annotate, Count und Distinct in einem Queryset Rückgabe von jbyteArray von nativem c in Android