动画后，Google地图容器无法正常调整大小

I have a google maps container, let's say 600px height.

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

I have a button, resizing (jQuery) the div container arround the map:

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

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

Now the container and map are of 300px height, but the google maps api thinks it's still 600 pixel, so the center of the map is still at 300 px although it should be at 150 px ( 300 / 2 ).

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

http://woisteinebank.de/dev2.html# When you search for a location in the box, it's getting centered. Hit "Eintragen" and search again, it's not properly centered.

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

Can you try and verify or even suggest how to fix this flaw?

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

I tried to use the usual solution with triggering the resize event but it doesn't work

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

1 个解决方案

#1

Ha ha because you trigger the resize event before the animation even starts :-) You have to wait until it ends. For this, use the 4th argument of .animate - the complete callback which is called after the animation ends:

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

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