如何使用jQuery Mobile显示全屏谷歌地图？

以下代码显示奇怪的输出。 我应该看一个全屏移动地图。 但出于某种原因，它只显示在屏幕的一部分上。 我正在使用jquery.ui.map进行映射。

            
 
 
My Title
 
 
 
 
  $('#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); }); }); }); });    

输出：

提前致谢。

Answer 1

我的移动网站的解决方案是设置样式position:absolute; width:100%; height:100%; position:absolute; width:100%; height:100%; 对于canvasdiv。 您可以使用top和bottom样式为工具栏留出空间。

Answer 2

如果你使用jQuery， 页眉和页脚是不可避免的。 我为页眉和页脚设置了{data-position="fixed" data-fullscreen="true"} ，并设置了html { height: 100% } body { height: 100%; margin: 0; } #map { position:absolute; width: 100%; height: 100%; padding: 0; } html { height: 100% } body { height: 100%; margin: 0; } #map { position:absolute; width: 100%; height: 100%; padding: 0; } 同样，菜单和地图在移动设备上完美结合。

Answer 3

容器和地图canvas需要100％的宽度和高度。

从jQuery移动网站，他们的结构是：

 
 
 
Maps
 
 
  
  

而CSS：

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

从这里： http ： //view.jquerymobile.com/master/demos/examples/maps/geolocation.php

Answer 4

我一直在搞乱这一点，并设法找到完美的解决方案。 它适用于带或不带标题的页面。 它将地图完美地定位在页眉和页面底部之间的空间中（如果没有标题，则在整个页面上），用于任何分辨率和任何标题高度。

如果页面有标题，则此解决方案需要CSS和JS;如果页面没有标题，则需要CSS。

HTML

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; } 

JS

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