Question

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

我已经尝试了以下操作但是当容器大小发生变化时似乎都失败了，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

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

1 个答案: