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); });