动画后，Google地图容器无法正确调整大小 [英] Google Maps container doesn't resize properly after animation

问题描述

我有一个google地图容器，比方说600px高度。

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

我有一个按钮，调整大小（jQuery）div容器在地图周围：

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

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

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

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 ).

http://woisteinebank.de/dev2.html#
当您在框中搜索位置时，它会居中。

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.

您可以尝试验证甚至建议如何解决这个缺陷吗？

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

我尝试使用常规解决方案触发 resize 活动，但不起作用

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

推荐答案

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

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:

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

这篇关于动画后，Google地图容器无法正确调整大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！