Google Map容器​​的jQuery动画高度 [英] jQuery animate height of Google Map container

问题描述

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

I have a map container DIV. Lets call it #mapcontainer.

我用jQuery动画其高度:

I animate its height with jQuery:

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

我知道，如果要调整地图容器的大小，则需要使用以下方法触发Google地图的调整大小:

I know that if a map container is resized google maps needs to be triggered to be resized using:

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

现在很明显的事情是在animate的回调中执行此操作:

Now the obvious thing is to do this in the callback of animate:

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

但这看起来并不流畅，并且动画制作完成后，地图只是突出到了最高点.

But this doesn't look smooth and the map just juts to the hight after the animation has completed.

反正动画运行时地图是否可以调整大小，以使地图平滑过渡?

Is there anyway that the map can be resizing as the animation is running so the map transitions smoothly?

推荐答案

动画制作完成后触发事件，我认为是问题所在.

You trigger the event after the animation is complete and I think it's the issue.

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

It's not a good solution but maybe you can use setInterval and trig the event every 1ms when the animation is running. Maybe it it will lag, and as I said its not a best-practies solution.

var timer;

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

这篇关于Google Map容器​​的jQuery动画高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！