使用jquery調整谷歌地圖api v3 DIV - 瓷磚沒有正確刷新

Question

我使用Google Maps api v3創建可以調整大小的地圖（該div使用jQuery切換展開和收縮）。通過研究，我發現我應該調用google.maps.event.trigger（map，'resize'）;調整地圖大小時。我已經這樣做了，但瓷磚刷新後仍然有問題。

我使用的代碼是：

<script> 
document.write('<a id="expandMap" href="#" target="_blank" title="Expand the map">+ expand map</a>'); 

/* Expand map_canvas DIV */ 

jQuery('#expandMap').toggle(function(){ 
jQuery('a#expandMap').text('- contract map'); 
jQuery('a#expandMap').attr('title', 'Contract the map'); 
jQuery('#map_canvas').animate({'height': '600px'}, 750, 'swing'); 
google.maps.event.trigger(map, 'resize'); 
}, function(){ 
jQuery('a#expandMap').text('+ expand map'); 
jQuery('a#expandMap').attr('title', 'Expand the map'); 
jQuery('#map_canvas').animate({'height': '193px'}, 750, 'swing'); 
google.maps.event.trigger(map, 'resize'); 
}); 

/* Expand map_canvas DIV End */ 
</script> 

任何人都可以提出任何想法？展開後，如果您點擊合約按鈕，則會有一個閃光燈，其中所有圖塊都可以正常顯示，因此看起來在縮小時會觸發resize事件。在合約狀態下，地圖完美地工作;平移所有的瓷磚刷新，因爲他們應該。

真的很感謝任何幫助！

乾杯！

Answer 1

animate()需要一些時間。

動畫完成至少當你必須觸發地圖的縮放事件（還可能觸發它的每一步），而不是當它開始