谷歌地图的高度只有30px

我正在用jQuery Mobile创建一个web应用程序。我的地图不显示我想要的方式。我希望它填充标题下的屏幕。内容div的宽度和高度都设置为100％，但只有宽度跟随此参数，高度设置为30px。谷歌地图的高度只有30px

一个按钮被按下时，该页面显示：

<div data-role="page" data-theme="b" id="Map"> 
    <div data-role="header"> 
     <a href="#Resultaten" data-role="button" data-icon="back" align="left" 
     data-iconshadow="false" data-direction="reverse" data-transition="slide" 
     data-iconpos="notext">Terug</a> 
     <h1>Kaart</h1> 
     <a href="#Home" data-role="button" data-icon="home" 
     data-iconshadow="false" data-direction="reverse" onclick="empty()" 
     data-transition="slide" data-iconpos="notext">Terug</a> 
    </div> 
    <div data-role="content" id="map_canvas"> 
    <script> 
     var map; 
     function create_map(){ 
      var myOptions = { 
      zoom: 15, 
      center: new google.maps.LatLng(latitude, longitude), 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
      } 
      map = new google.maps.Map(document.getElementById("map_canvas"), 
      myOptions);  
     }     

    </script> 
    </div> 
</div>

map_canvas提供的CSS：

.map_canvas{ 
width: 100%; 
height: 100%; 
padding: 0; 
}

Result

来源

2012-04-13 Glenn Van Cauwenbergh

.map_canvas不会有对元件的任何影响与ID map_canvas，使用地图`div`上述#map_canvas代替

来源

2012-04-13 17:01:01

是的小错误，谢谢你的清晰的眼睛，但它并没有完全解决它。 – 2012-04-16 08:38:55

CSS需要知道的东西％。目前您尚未指定包含地图div的div的高度。在桌面浏览器中，有必要将高度指定为<html>。

由于API需要该空间，因此将自己放入地图div也不是一个好习惯。您可能会发现API在创建地图时会删除您的脚本。

来源

2012-04-13 09:32:56

好吧，我把我的脚本。 'html，body {height：100％; }'不起作用 – 2012-04-13 09:38:54

'div id =“Map”''怎么样？ – 2012-04-13 14:11:38

当我将'div id =“Map”'的宽度和高度设置为100％时，结果会更好，并且'div id =“map_canvas”'也会设置为100％。我现在得到一个滚动条向下滚动与标题相同的高度。我也收到一个只有10％显示的马车地图，当我重新调整我的浏览器大小时，地图显得很正常。 – 2012-04-16 08:32:02

谷歌地图的高度只有30px

回答

相关问题