google-maps - Google Maps API v3 - 如何检测 map 何时更改为全屏模式？

Question

有没有办法检测用户何时单击默认的全屏模式按钮？

这些是我正在使用的 map 选项:

var mapOptions = {
            center: {
                lat: 40.907192,
                lng: 20.036871
            },
            zoom: 2,
            fullscreenControl: true
        };

Answer 1

我不确定您是想检测实际的点击事件还是只检测全屏和非全屏之间的状态变化。我需要做后者。您需要知道的两件事是 a) 本地图大小发生变化时， map 将触发 bounds_changed 事件和 b) 在您的事件处理程序中，您需要将 map div 的大小与整个屏幕的大小。这样做:

google.maps.event.addListener( map, 'bounds_changed', onBoundsChanged );

function onBoundsChanged() {
    if ( $(map.getDiv()).children().eq(0).height() == window.innerHeight &&
         $(map.getDiv()).children().eq(0).width()  == window.innerWidth ) {
        console.log( 'FULL SCREEN' );
    }
    else {
        console.log ('NOT FULL SCREEN');
    }
}

请注意，getDiv() 返回您自己传递给 Map() 构造函数的 div。该 div 不会针对全屏调整大小 - 它的子元素会。因此，我获取 map div 的子项的那部分是正确的，但有点笨拙。您也可以像这样更简短地重写它，它会起作用，但如果 Google 更改 map div 的类名，这在未来可能会中断:

if ( $( '.gm-style' ).height() == window.innerHeight &&
     $( '.gm-style' ).width()  == window.innerWidth ) {