Google Map 容器的 jQuery 动画高度

Question

我有一个 map 容器 DIV。我们称之为#mapcontainer。

我使用 jQuery 为其高度设置动画:

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

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

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

现在显而易见的事情是在 animate 的回调中执行此操作:

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

但这看起来并不平滑，动画完成后 map 只是突出到高度。

是否可以在动画运行时调整 map 大小，以便 map 平滑过渡？

Answer 1

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

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

var timer;

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