javascript - Google Map API V3 检测容器宽度/高度变化

Question

我试图检测 map 容器何时发生更改，以便我可以运行 google.maps.event.trigger(map, 'resize'); 但我似乎无法理解它上类。是否有监听器来检测容器何时更改大小？我知道它不起作用，因为 map 上有一个部分是灰色的。

我尝试了以下方法，但当容器大小发生变化时，所有操作似乎都失败了，当我的光标拖动 map 时，bounds_changed 起作用。

google.maps.event.addListener(map, 'bounds_changed', function() {
    google.maps.event.trigger(map, 'resize');
});

google.maps.event.addDomListener(map, 'resize', function() {
    google.maps.event.trigger(map, 'resize');
});

映射声明和 init()

var map, mapOptions, mapElement,valMap,valZoom;
google.maps.event.addDomListener(window, 'load', init);
function init() {
    mapOptions = {
        zoom: 2,
        center: new google.maps.LatLng(40.697299 , -73.809815),
        panControl:true
    };
    mapElement = document.getElementById('map');
    map = new google.maps.Map(mapElement, mapOptions);
    mapCenter();
    mapZoom();
    google.maps.event.addListener(map, 'center_changed', function() {
        mapCenter();
    });
    google.maps.event.addListener(map, 'zoom_changed', function() {
        mapZoom();
    });
google.maps.event.addListener(map, 'bounds_changed', function() {
    google.maps.event.trigger(map, 'resize');
});

}

向上键调整大小

$("#width, #height").keyup(function() {
    delay(function(){
        size();
    }, 500 );
        console.log('0');
        mapElement = document.getElementById('map');
        console.log(mapElement);
        google.maps.event.addDomListener( mapElement, 'resize', function(e){
            console.log( 'Resize', e);
            google.maps.event.trigger(map, 'resize');
            console.log('1');
        });
        console.log('2');
});

Answer 1

您是否尝试过使用类似 google.maps.event.addDomListener( mapElement, 'resize', function(e){console.log( 'Resize', e)} ); 的方法？

也许 Map 对象的监听器不支持'resize'。

编辑:JSFiddle