Google地圖在使用切換時未完全展開

我有兩個彼此相鄰的div。左邊的那個包含Google Map，右邊的是空的，我將它用作邊欄。我創建了一個切換按鈕，用於摺疊邊欄並擴展地圖以覆蓋視口的整個寬度。但是，Google Map div似乎並沒有完全展開，並且始終將部分空間留空。當我只是擴展普通div時，不會出現此問題，因此我不知道這是否是Google Maps的問題？ Fiddle：Google地圖在使用切換時未完全展開

$(document).ready(function() { 
    $("#toggle").click(function() { 
     $("#side_bar").animate({ 
      width: 'toggle' 
     }); 
     var value = $("#map")[0].style.width !== "100vw" ? '100vw' : '80vw'; 
     $("#map").animate({ 
      width: value 
     }); 
    }); 
});

我得到了同樣的問題在所有瀏覽器，最新版本：

Image Example

來源

2014-06-13 user3716388

在提琴地圖完美的大小調整這裏。你可以張貼一些截圖嗎？螞蟻發佈您的瀏覽器信息 – LGVentura

@LGVentura我添加了一個鏈接到OP上的截圖。無論我使用哪種瀏覽器，我都會遇到同樣的問題。如果您增加小提琴結果寬度，那麼同樣的事情發生在那裏。我在以下網站上上傳了一個示例：[網站示例]（http://www.dogeglobal.com/toggle.html）。 – user3716388

你可以調整你的地圖，而使用step:function(){}回調.animate()動畫的#map寬度。請看：

$("#map").animate({ 
    width:value 
    },{step:function(){ 
     google.maps.event.trigger(map,'resize'); 
    }, 
});

我更新了你的提琴演示：

http://jsfiddle.net/XnDsS/1/

來源

2014-06-13 18:52:20 LGVentura

現在正常工作，謝謝！我可以問一下step：function和function有什麼區別嗎？試了兩個，我似乎得到了同樣的結果。 – user3716388

@ user3716388 step：function（）是.animate（）函數的回調函數。當你動畫一些元素時，你可以在動畫開始，結束，完成，失敗，進度時調用一個函數。詳細瞭解.animate（）http://api.jquery.com/animate/ – LGVentura

它看起來像地圖是灰色的恰恰是尚未加載的一部分。如果您對其進行了瀏覽，它會正確加載。

嘗試刷新谷歌地圖你切換後：

google.maps.event.trigger(map, 'resize');

(thanks to this answer for the google maps refresh script)

來源

2014-06-13 16:31:31 possiblyLethal

Google地圖在使用切換時未完全展開

回答

相關問題