javascript - 更改绘制谷歌地图的 div 的高度

Question

我正在使用 Google Mpas Api v3 在 200 像素高的 div 中显示 map :

<div id='propertyKaart'></div>

使用普通的 javascript，我使用这个 div 来显示 map :

$(document).ready(function(){
        var map = new google.maps.Map(document.getElementById("propertyKaart"),
                    mapOptions);
                    map.setCenter(punt);
                    map.setZoom(14);
})

单击类 .mapPuller 的按钮，我想将图表的高度更改为 600px:

var mapState        
$('.mapPuller').click(function(e){
        if(mapState == 'klein'){
            $('#propertyKaart').animate({height: '600px'}, 200);
            mapState = 'groot'

        }else{
            $('#propertyKaart').animate({height: '200px'}, 200);
            mapState = 'klein';

        }
         //---- here
    })

工作起来很有魅力，只有一个问题。 map (可以说是图 block )仍然认为 div 高 200 像素。

在documentation我发现在更改容器 div 时必须触发 resize 事件。所以我在 //------ here 点的 .mapPuller 函数中添加了以下代码。

google.maps.event.trigger(map, 'resize');

但这行不通...... 我错过了什么吗？

当我调整浏览器窗口大小时，事件被触发并且磁贴似乎开始工作......

Answer 1

我尝试使用 jquery 的 animate 函数调整 map 大小，但遇到了同样的问题。 map 图 block 不适应。但是触发 map resize 事件解决了这个问题。

因此，范围界定可能存在问题。确保 map 变量可以在 mapPuller 函数中访问，并确保控制台中没有其他错误。