PhoneGap + JQuery Mobile + Google Maps v3: Karte zeigt Links Oben Fliesen?

Ich habe eine PhoneGap-Anwendung, die verwendet JQuery mobile, um zwischen den Seiten zu navigieren.

Wenn ich navigieren Sie von der Hauptseite aus zu einer Seite mit einer Google map, die Karte zeigt nur eine einzelne Kachel in einer Zeit, in der oberen linken Ecke, wie dies:
PhoneGap + JQuery Mobile + Google Maps v3: Karte zeigt Links Oben Fliesen?

Was kann der Grund dafür sein ?

Source Code:
Das folgende script wird in den head meiner Seite

<script>
            $(document).on("pageinit", "#stores", function () {
                var centerLocation = new google.maps.LatLng('57.77828', '14.17200');

        var myOptions = {
            center: centerLocation,
            zoom: 8,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            callback: function () { alert('callback'); }
        };

        map_element = document.getElementById("map_canvas");




        map = new google.maps.Map(map_element, myOptions);

        var mapwidth = $(window).width();
        var mapheight = $(window).height();
        $("#map_canvas").height(mapheight);
        $("#map_canvas").width(mapwidth);
        google.maps.event.trigger(map, 'resize');

            });
        </script>

Meine Seite ist wie folgt

<!-- Home -->
        <div data-role="page" id="home">
.
.
.
</div>

<div data-role="page" id="stores">
<div data-role="content" id="map_canvas"></div>
</div>

Navigiere ich von zu Hause aus, um die Seite Karten wie diese:

<a href="#stores">Stores</a>

Update
nach der Anwendung Gajotres Lösung die Fliesen werden wie diese

Zeigen Sie uns Ihre javascript-und HTML-code.
stackoverflow.com/questions/13823556/...
Ich habe den code Hinzugefügt, überprüfen Sie bitte die geänderte Frage
Ich erlebte ähnliche Probleme wie ich. Ich fand, dass, wenn die Seite initialisiert wurde, die Karte wäre dimensioniert sein, basierend auf, was es dachte, es ist derzeit erhältlich in der Größe ist, aber wenn du später machte es sichtbar, würde es nicht automatisch in der Größe anpassen. google.maps.event.trigger(map, "resize"); sollten etwas tun für Sie, aber Sie haben, nennen Sie es, wenn Sie die Karte sichtbar.

InformationsquelleAutor Mina Samy | 2013-04-16

9

intro

Neueren Versionen von jQuery Mobile und Google Maps v3 sind etwas ganz besonderes.

Ihre erste problem war mit pageinit event der Berechnung. Sie cant get eine korrekte Seite, Höhe und Breite. So verwenden Sie stattdessen pageshow, Sie finden es funktioniert in meinem Beispiel.

Bevor Sie zeigen die Karte, die Sie brauchen, um die Größe Ihrer content-DIV. Dies ist, weil die content-div wird die Größe gemäß den zur Verfügung stehenden inneren Elemente. Wir brauchen also, um dieses Update manuell, über javascript oder CSS. Ich habe bereits eine Antwort auf diese Frage: google-map nicht auf ganzen Bildschirm nach upgrade auf jquerymobile 1.2 aber ich kann dir auch zeigen, ein Beispiel:

Beispiel arbeiten

Arbeiten jsFiddle Beispiel: http://jsfiddle.net/Gajotres/GHZc8/ (Javascript-Lösung, die CSS-Lösung gefunden werden kann, die in einem unteren link).

Code

HTML -
```
<!DOCTYPE html>
<html>
<head>
    <title>jQM Complex Demo</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>    
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>    
</head>
<body>
    <div data-role="page" id="index">
        <div data-theme="a" data-role="header">
            <h3>
                First Page
            </h3>
        </div>

        <div data-role="content" id="content">
            <div id="map_canvas" style="height:100%"></div>
        </div>

        <div data-theme="a" data-role="footer" data-position="fixed">
            <h3>
                First Page
            </h3>
        </div>
    </div>
</body>
</html>    
```
Javascript

Hier ist eine Funktion zum berechnen der richtigen Seite Höhe:
```
   $('#map_canvas').css('height',getRealContentHeight());

function getRealContentHeight() {
    var header = $.mobile.activePage.find("div[data-role='header']:visible");
    var footer = $.mobile.activePage.find("div[data-role='footer']:visible");
    var content = $.mobile.activePage.find("div[data-role='content']:visible:visible");
    var viewport_height = $(window).height();

    var content_height = viewport_height - header.outerHeight() - footer.outerHeight();
    if((content.outerHeight() - header.outerHeight() - footer.outerHeight()) <= viewport_height) {
        content_height -= (content.outerHeight() - content.height());
    } 
    return content_height;
}
```
Eine andere Lösung

Es gibt auch eine andere Lösung für dieses problem, nur mit CSS und kann es gefunden werden HIER. Ich bevorzuge diese Lösung, Ursache, die es nicht benötigen javascript um korrekt zu beheben, die Karte Höhe.

CSS:
```
#content {
    padding: 0;
    position : absolute !important; 
    top : 40px !important;  
    right : 0; 
    bottom : 40px !important;  
    left : 0 !important;     
}
```
Eine Letzte Sache

Auch wenn die Breite Seite ist immer noch falsch ist, wird einfach 100%:
```
$('#map_canvas').css('width', '100%');
```
- Habe versucht, Ihre Lösung, das Problem ist immer noch die gleiche, aber die Fliese ist größer. könnte es etwas anderes sein ?
- Warum versuchen Sie nicht, meine Lösung in Ihrem Beispiel. Wenn meine Lösung auch nicht funktioniert und dann das problem woanders ist.
- ok, nochmal getestet, erscheint die Karte um das Fenster zu passen, aber immer wenn ich Tippen Sie auf die Karte es zeigt auch eine einzelne Kachel, wie in dem beigefügten Bild
- Ich glaube, ich verstehe dein problem. Sie anfügen an den falschen div. Dont hängen Sie an das data-role="content" div wie diese: <div data-role="content" id="map_canvas"></div> erstellen Sie stattdessen ein weiteres div in das eine, wie diese: <div data-role="content"><div id="map_canvas"></div></div>. Im Grunde kämpfst du mit einem jQuery-Mobile über ein content-div Abmessungen.
- Vielen Dank, Es funktionierte, nachdem die mit Ihrem code in die Größe des map-canvas "pageshow" statt "pageinit"
InformationsquelleAutor Gajotres
0

Ich habe dieses Problem seit Monaten schlug mein Kopf gegen die Wand versuchen, eine Lösung zu finden. Auch wenn die style-Eigenschaften für die Inhalte und map-canavas divs nicht alle Probleme lösen. google.maps.event.trigger(map, "resize") habe es nicht entweder. Die Karte war voller Bildschirm, jetzt aber immer noch zentriert in der oberen linken Ecke. Und wenn Sie aufgerufen, Ihre initialisieren Funktionen auf jeder pageshow die Karte wäre wieder auf seine ursprüngliche position jeder Zeit.

War ich in der Lage zu kommen mit diesem aufgerufen, auf dem pageshow-event und alle meine Probleme gelöst!
```
$('map-page').on("pageshow", function() {
    var latLng = map.getCenter();
    google.maps.event.trigger(map,'resize');
    map.setCenter(latLng);
});
```
CSS
```
<style>
  html, body, #map-canvas {
    height: 100%;
    margin: 0px;
    padding: 0px
  }

  .ui-page { -webkit-backface-visibility: hidden; }

</style>
```
Hier ist mein Inhalt und map-canvas div.
```
<div data-role="content" id="mapContent" style="padding:0;position:absolute;
top:40px;right:0px;bottom:60px;left:0px; ">
    <div id="map-canvas" style="width:100%;" >
    </div>
</div>
```
Wird der aktuelle Mittelpunkt der Karte wird die Karte auf den aktuellen div, legt dann die Karte zentrieren. Auf diese Weise, wenn der Benutzer navigiert Weg von der Seite und kommt wieder zurück, die Karte verliert nicht seine position.

Hoffe, das hilft.

Robert

InformationsquelleAutor BGecko

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.

intro

Beispiel arbeiten

Code

HTML -

Javascript

Eine andere Lösung

CSS:

Eine Letzte Sache