动画后，Google地图容器无法正常resize

我有一个谷歌地图容器，让我们说600px高度。

我有一个按钮，调整（jQuery）地图上的div容器：

$('#add').click(function() { $("#container-map").animate({ height: '50%', minHeight: '50%' }, 1500 ); google.maps.event.trigger(map, 'resize'); }); 

现在容器和地图的高度为300px，但谷歌地图api认为它仍然是600像素，所以地图的中心仍然是300 px，尽管它应该是150 px（300/2）。

http://woisteinebank.de/dev2.html#当您在框中搜索某个位置时，它会居中。 点击“Eintragen”并再次搜索，它没有正确居中。

你能尝试validation甚至建议如何解决这个缺陷吗？

我尝试使用通常的解决方案触发resize事件，但它不起作用

Answer 1

哈哈，因为你在动画开始之前触发resize事件:-)你必须等到它结束。 为此，使用.animate的第四个参数 – 动画结束后调用的complete回调：

 $('#add').click(function() { $("#container-map").animate({ height: '50%', minHeight: '50%' }, 1500, function () { google.maps.event.trigger(map, 'resize'); }); });