Question

我正在使用Google Mpas Api v3以200px高分区显示地图：

<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高。

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

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

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

当我调整浏览器窗口大小时，事件会被触发，并且磁贴似乎正在进行工作.....

Answer 1

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

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

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

1 个答案: