谷歌地圖的高度只有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

回答

相關問題