Jquery 1.9.1，CSS和谷歌地圖：“顯示：無”問題

Question

我正在努力讓我的網站上有谷歌地圖。 問題是地圖顯示如下：

我理解的是在顯示div之后重新調整對象大小的已知問題。 （更改為display: none; display: block;即）

我正在使用JQueryUI Tabs和display: none; 在封裝選項卡的div上。

我確實嘗試刪除選項卡並在開始時將所有顯示為塊，然后在window.load上進行更改 - 但是在加載后手表事物自動移動是相當丑陋的。

這個JSFiddle演示了我想要它（簡化），雖然它有缺陷，因為我不能使它正常工作（它根本沒有顯示地圖）。

還有其他方法可以做到 - 或者我是否必須為我的地圖功能找到不同類型的布局？

Answer 1

我發現唯一可靠的方法是使用canvas display:block初始化地圖，然后隱藏它。 如果這是在$（function（）{...}）結構中完成的，那么在隱藏之前你不應該看到地圖。

您還可以嘗試隱藏畫布，並在顯示畫布后首次初始​​化地圖。

無論哪種方式，只有在其畫布可見時才初始化地圖。

Answer 2

采用

map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);  

$("#map_canvas").css("height", $(window).height());

Answer 3

在初始化之后操作任何貼圖的外部div時會發生這種情況。 因此，要解決此問題，必須在顯示所有外部div后初始化地圖。

所以只需在最后初始化地圖：

$mapsOuterDivs.slideToggle(700);
setTimeout(function(){
    initializeGoogleMap();
},300);