谷歌地圖+ jQuery：渲染錯誤

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

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

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

UPDATE

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

來源

2009-07-19 Bobby Jack

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

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

試試這個：

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

來源

2009-07-19 17:07:53

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

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

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

來源

2009-07-19 19:21:02

從online docs：

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

來源

2009-07-19 21:16:42

使用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。

來源

2009-08-19 11:58:14 rjstelling

谷歌地圖+ jQuery：渲染錯誤

回答

相關問題