jQuery动画Google Map容器​​的高度

我有一个地图容器DIV。 让我们称之为#mapcontainer。

我用jQuery设置它的高度:

$("#mapcontainer").animate({height: +=200px}, 500); 

我知道如果要调整地图容器的大小,需要触发google地图以使用以下内容resize:

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

现在显而易见的是在animate的回调中这样做:

 $("#mapcontainer").animate({height: +=200px}, 500, "linear", function(){ google.maps.event.trigger(map, 'resize'); }); 

但这看起来并不平滑,地图只是在动画完成后突然出现。

无论如何,地图可以在动画运行时resize,以便地图平滑过渡?

您在动画完成后触发事件,我认为这是问题所在。

这不是一个好的解决方案,但也许你可以使用setInterval并在动画运行时每1ms触发一次事件。 也许它会滞后,正如我所说它不是一个最好的实践解决方案。

 var timer; timer = setInterval(function(){ google.maps.event.trigger(map, 'resize')}, 100); $("#mapcontainer").animate({height: +=200px}, 500, "linear", function(){ timerMap = clearInterval(timer); });