初始化谷歌地圖，而不可見= bug

初始化谷歌地圖時，我得到這個錯誤 - 而畫布隱藏在（不活動）選項卡上。 - >它是可滾動和可縮放的，但不會在整個畫布上延伸，畫布的其餘部分保持灰色。初始化谷歌地圖，而不可見= bug

enter image description here

我使用jQuery的地圖擴展（http://code.google.com/p/jquery-ui-map/）來加載我的網頁上GMAP。還有兩個標籤視圖，其中一個標籤上沒有地圖，另一個標籤上有gmap。

我有兩個場景（INIT在頁面加載地圖）： 1.頁面加載顯示TAB1（配圖） 2.頁面加載顯示TAB2（無圖）在方案1中一切

很好，地圖顯示和顯示，行爲正常。在場景2中，地圖看起來像上面的圖片

我試圖在切換選項卡時再次初始化地圖。但這似乎沒有任何影響。

是否有正確重新初始化gmap元素的選項？
重新膨脹gmap元素的方法？
你有類似的錯誤，並知道我的解決方案嗎？

謝謝！ Patric

來源

2012-11-20 patrics

問題是當元素不顯示時，他們無法正確計算寬度。 – epascarello

有沒有辦法重新充氣的gmap元素 - 是的google.maps.event.trigger（地圖，'調整大小'） – Adam

正如在前面的答案中提到的那樣，Google Map在初始化時只會呈現其容器大小的地圖。當包含元素不可見時，地圖呈現大小爲0x0。

通過觸發地圖上的resize事件，您會希望通知地圖其包含已更改大小。

// Assuming "map" is the map object returned by "google.maps.Map" 
google.maps.event.trigger(map, 'resize');

來源

2012-11-20 18:16:38

你什麼時候觸發這個？如果地圖已經渲染完畢，則不需要再次觸發。 – Sparky

@ Sparky672每次觸發容器更改。如果您正在使用自適應設計，那麼您每次調整窗口大小時都會觸發它。 –

是的，當然，但這可能甚至可能與OP沒有關係。我的觀點是，你不需要每次訪問標籤後觸發它，因爲你已經第一次呈現標籤了。換句話說，你需要測試地圖是否已經被渲染，或者你不需要多次渲染它。 – Sparky

已知問題/按預期工作。您必須向選項卡添加處理程序，以在單擊選項卡後初始化選項卡中的地圖。相反，在選項卡處於活動狀態之前，不要初始化您的地圖。

來源

2012-11-20 17:52:31

如前所述，這是一個已知問題。解決方案是在顯示選項卡時動態加載地圖。我看不到你的代碼，所以這是一個非常簡單的通用解決方案。修改用於顯示標籤內容的任何函數，如下所示。當你加載特定的選項卡時，檢查地圖的存在並在需要時加載。

$(document).ready(function() { 

    function my_tab_reveal() { // or whatever function you use for showing your tabs content 
     // whatever your code for revealing tab content is here 

     if (!loaded) { // this checks to see if the map is not already loaded 
      load(); // this loads the map 
     } 
    } 

    var loaded = false; 
    load = function() { 
     // your google maps JavaScript code goes here 

     // checks tiles to see if map has loaded 
     google.maps.event.addListener(map, "tilesloaded", function() { 
      loaded = true; 
     }); 
    } 

});

來源

2012-11-20 18:08:26 Sparky

初始化谷歌地圖，而不可見= bug

回答

相關問題