Google Maps API v3 - 如何检测地图何时更改为全屏模式？

Question

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

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

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

Answer 1

我不确定你是想要检测实际的点击事件还是只是全屏之间的状态变化而不是.我需要做后者.您需要知道的两件事是:a)当地图大小改变时,地图将触发bounds_changed事件,b)在您的事件处理程序中,您需要将地图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没有为全屏调整大小 - 它的孩子就是这样.因此,我正在获得地图div的孩子的那部分是正确的,但有点笨拙.您也可以像这样更简短地重写它,它会起作用,但如果Google更改map div的类名,将来可能会破坏:

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

Answer 2

DaveBurns 的答案进行了一些修改，因为我不使用 jQuery。我还需要使用 clientHeight 和 clientWidth

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

function onBoundsChanged() {
  if (
    map.getDiv().firstChild.clientHeight === window.innerHeight &&
    map.getDiv().firstChild.clientWidth === window.innerWidth
  ) {
    console.log('FULL SCREEN');
  } else {
    console.log('NOT FULL SCREEN');
  }
}

Answer 3

此解决方案为我工作：

/** Full Screen event */

$(document).bind('webkitfullscreenchange mozfullscreenchange fullscreenchange', function() {
    var isFullScreen = document.fullScreen ||
        document.mozFullScreen ||
        document.webkitIsFullScreen;
    if (isFullScreen) {
        console.log('fullScreen!');
    } else {
        console.log('NO fullScreen!');
    }
});

Answer 4

您可以使用具有fullscreenchange事件的HTML5 Fullscreen API：

“成功启用全屏模式后，包含该元素的文档会收到 fullscreenchange 事件。退出全屏模式时，文档会再次收到 fullscreenchange 事件”。

请注意

“目前，并非所有浏览器都使用无前缀版本的 API”。

例如，在 Mozilla Firefox 中，事件处理程序将如下所示

document.onmozfullscreenchange = function(event) { 
    console.log("Full screen change")
}