javascript - Google Maps 容器在动画后无法正确调整大小

Question

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

我有一个按钮，调整（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');
     });
});