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

Der folgende Code zeigt seltsame 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.Wie kann ich eine Vollbild-Google-Karte mit jQuery Mobile anzeigen?

<!DOCTYPE html> 
<html> 
    <head> 
    <title>My Page</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="css/jquery.mobile-1.1.0.min.css" /> 
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> 
    <script src="js/jquery-1.7.1.min.js"></script> 
    <script src="js/jquery.mobile-1.1.0.min.js"></script> 
    <script type="text/javascript" src="js/jquery.ui.map.min.js"></script> 
</head> 
<body> 

<div data-role="page"> 

    <div data-role="header"> 
     <h1>My Title</h1> 
    </div><!-- /header --> 

    <div data-role="content" id="map_canvas" name="contentMain"> 

    </div><!-- /content --> 

</div><!-- /page --> 
<script> 

    $('#map_canvas').gmap().bind('init', function() { 
    // This URL won't work on your localhost, so you need to change it 
    // see http://en.wikipedia.org/wiki/Same_origin_policy 
    $.getJSON('http://jquery-ui-map.googlecode.com/svn/trunk/demos/json/demo.json', function(data) { 
     $.each(data.markers, function(i, marker) { 
      $('#map_canvas').gmap('addMarker', { 
       'position': new google.maps.LatLng(marker.latitude, marker.longitude), 
       'bounds': true 
      }).click(function() { 
       $('#map_canvas').gmap('openInfoWindow', { 'content': marker.content }, this); 
      }); 
     }); 
    }); 
}); 
</script> 
</body> 
</html>

Ausgang:

enter image description here

Vielen Dank im Voraus.

Quelle

2012-05-02 Shahjalal

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

Quelle

2012-05-02 00:48:26

Dank .. es funktioniert ... – Shahjalal

'Position: absolute' ist, was ich wa s fehlt, danke! – Dennis

denke auch, die Größe der Karte zu ändern: google.maps.event.trigger (map, "resize"); –

Der Container und das Kartenleinwand müssen 100% Breite und Höhe haben.

Von der mobilen Website jQuery ihre Struktur ist:

<div data-role="page" id="map-page" data-url="map-page"> 
    <div data-role="header" data-theme="c"> 
     <h1>Maps</h1> 
    </div> 
    <div data-role="content" id="map-canvas"> 
     <!-- map loads here... --> 
    </div> 
</div>

Und die CSS:

#map-page, #map-canvas { width: 100%; height: 100%; padding: 0; }

Von hier aus: http://view.jquerymobile.com/master/demos/examples/maps/geolocation.php

Quelle

2013-06-01 11:49:09

Kopf- und Fußzeilen unvermeidbar sind, 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; }, so dass sowohl das Menü als auch die Karte auf dem mobilen Gerät perfekt zusammenarbeiten.

Quelle

2014-07-25 17:02:06

Ich habe diese Lösung für einen Tag gesucht. Das funktioniert unglaublich gut! Vielen Dank. –

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

<div data-role="page" id="mapPage"> 
    <div data-role="header"`> 
     <!-- your header HTML... --> 
    </div> 

    <div data-role="content"> 
     <div id="map-canvas"></div> 
     <p id="nogeolocation"></p> 
    </div> 
</div>

CSS

#map-canvas { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    top: 0; 
    left: 0; 
} 

/* eliminates scrollbars in map infowindow (optional) */ 
#mappopup { 
    line-height: 1.35; 
    overflow: hidden; 
    white-space: nowrap; 
}

var mapPageHeader = $("#mapPage .ui-header").eq(0); 
if(mapPageHeader.length > 0) { 
    var headerHeight = mapPageHeader.outerHeight(); 
    $("#map-canvas").css({ 
     'height': ($(window).height() - headerHeight + 1) + 'px', 
     'top': headerHeight - 1 
    }); 
}

Quelle

2015-07-19 19:22:00

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

Antwort

Verwandte Themen