动画后,Google地图容器无法正确调整大小

Question

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

我有一个按钮,调整(jQuery)地图上的div容器:

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

现在容器和地图的高度都是300像素,但谷歌地图api认为它仍然是600像素,所以地图的中心仍然是300像素,尽管它应该是150像素(300/2).

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

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

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

Answer 1

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

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