2

我正在使用 Google Mpas Api v3 在 200px 高的 div 中显示地图：

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

使用普通的 javascript，我使用这个 div 来显示地图：

$(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
    })

像魅力一样工作，只有一个问题。地图（可以说是瓷砖）仍然认为 div 高 200px。

在文档 中，我发现更改容器 div 时必须触发调整大小事件。于是我当场在.mapPuller函数中添加了如下代码//------ here。

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

但这不起作用......我错过了什么吗？

当我调整浏览器窗口的大小时，事件被触发并且图块似乎完成了它们的工作.....

4

1 回答 1

1

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

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

于 2012-04-26T19:09:45.493 回答