2009-07-19 143 views
7

當在谷歌地圖放置在jquery-ui選項卡中時,地圖在某些情況下無法正確顯示。要重現:谷歌地圖+ jQuery:渲染錯誤

  1. 轉到here
  2. 點擊「列表」鏈接
  3. 調整瀏覽器窗口
  4. 點擊「地圖」鏈接

觀察,一些地名的疊加正確繪製,但其他人不會。實際上,我已經刪除了所有jquery-ui內容來限制問題的範圍,並且它看起來只是應用display:hide/display:block來解決問題。

UPDATE

該缺陷也會發生,有時顯示之間切換隻是當:無/塊 - 例如沒有調整大小發生。這似乎是最常見的IE(8)。

+0

這是用於Google Maps API v2還是v3?我一直在使用v3,並且遇到過類似的問題,但還沒有能夠100%解決它們。 – 2009-09-14 22:52:07

+0

我解決了這個問題讓我們來看看http://stackoverflow.com/a/13380866/1823525 – 2013-04-10 21:50:37

回答

0

試試這個:

map_initialize(); 

,因爲你必須告訴大家,頁面大小的地圖,也許這就是你有沒有一個jQuery一個

問題

if (window.attachEvent) { 
    window.attachEvent("onresize", function() {this.map.onResize()}); 
    } else { 
    window.addEventListener("resize", function() {this.map.onResize()} , false); 
    } 

編輯

好吧 刪除

if (window.attachEvent) { 
      window.attachEvent("onresize", function() {map.onResize()}); 
     } else { 
      window.addEventListener("resize", function() {map.onResize()} , false); 
     } 

和你

$('#map').show(); 

替換爲:

$("#map").show(1, function() { 
      resizeMap(); 
     }); 

resizeMap()將在特定的地圖上調用谷歌地圖 checkResize()。

來源:http://jqueryui.com/demos/tabs/#...my_slider.2C_Google_Map.2C_sIFR_etc._not_work_when_placed_in_a_hidden_.28inactive.29_tab.3F

+0

理論上聽起來不錯,但在實踐中對我不起作用:(示例更新) – 2009-07-19 17:21:55

3

嘗試調用map.onResize()後,你每一次顯示在地圖。

如果使用display:none隱藏地圖時調用地圖,它可能無法正常工作,因爲它的高度和寬度都爲零。

3

online docs

使用隱藏 活動標籤面板關閉左技術。例如。在 樣式表中替換 類選擇器「.ui-tabs」的規則。。UI的標籤隱藏」與

.ui-tabs .ui-tabs-hide { 
    position: absolute; 
    left: -10000px; 
} 
3

使用jQuery Google Maps plugin是在和jQuery UI的標籤相同的問題

地圖創建這樣的:

$("#google-map").googlemap({ 
    controls: false, 
    labels: true, 
    zoom: 9, 
    latitude: 51.5, 
    longitude: 0, 
    debug: false 
}); 

有人通過呼叫很容易解決(但不是很快)

$("#google-map").googlemap().getMap().checkResize(); 

顯示地圖div後。我已經在FF和Safari上進行了測試,此外還有

resizeTo(screen.width, screen.height); 

適用於FF但不適用於IE或Safari。