2012-04-08 115 views
2

我在調整Google Maps JavaScript API v3的大小時遇到​​了一些問題。如果我在加載時正確設置CSS「參數」(僅在documentation中),地圖將顯示100%的高度和寬度 - 沒有問題。但是,當我嘗試通過單擊鏈接來獲得相同的結果時,它不會顯示整個地圖。谷歌地圖不會全屏顯示整個地圖

This is how the map shows upon click on the link to toggle full screen

我對這個事件進行測試jQuery中都css()toggleClass()toggleClass()使得地圖進入隱形(隱藏地圖完全,而不是使其全屏幕),此代碼:

// jQuery 
$('#weather-map').toggleClass('test'); 

// CSS 
#weather-map.test { 
    height : 100%; 
    width : 100%; 
    top : 0; 
    left : 0; 
    position : absolute; 
    z-index : 200; 
} 

css()作品(地圖進入全屏幕),但上面的圖片顯示在地圖如何呈現在全屏幕:

$('#weather-map').css({ 
         'height' : '100%', 
         'width' : '100%', 
         'top' : '0', 
         'left' : '0', 
         'position' : 'absolute', 
         'z-index' : '200' 
         }); 

現在我想知道,它爲什麼會這樣?我錯過了一些東西,或者這種方法不是切換全屏地圖的正確方法嗎?

在此先感謝。

回答

4

這只是因爲Google的JavaScript映射工作原理。它根據容器的大小進行渲染,並且不會添加任何類型的處理程序以在容器重新調整大小時重新渲染。我想在你上面的例子中,你必須再次調用地圖初始化代碼來在你調整大小的div中再次渲染地圖。

+0

非常感謝!你的回答解決了我的問題,我會盡快接受它:) – Erik 2012-04-09 00:08:23

+0

幾周前我有這個問題 - 非常煩人,也很難解決。這只是一個容器開始的大小問題,然後縮小 - 從小開始並且變大。 – d2kagw 2012-04-09 00:46:55

+11

更好的是觸發一個resize事件,google.maps.event.trigger(map,'resize'); - 這會導致API重新計算其維度。在調整容器大小之後立即運行此操作。 – barryhunter 2012-04-09 18:55:59