javascript - 谷歌地图容器在动画后无法正确调整大小

Question

我有一个谷歌地图容器，假设高度为 600 像素。

我有一个按钮，调整 (jQuery) map 周围的 div 容器:

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

现在容器和 map 的高度是 300 像素，但 google maps api 认为它仍然是 600 像素，所以 map 的中心仍然是 300 像素，尽管它应该是 150 像素 ( 300/2 )。

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

您能否尝试验证甚至建议如何修复此缺陷？

我尝试使用 usual solution with triggering the resize event但它不起作用

Answer 1

哈哈，因为你在动画开始之前触发了resize事件:-)你必须等到它结束。为此，使用 the 4th argument of .animate - 动画结束后调用的 complete 回调:

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