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的孩子的那一部分是正确的，但有点笨拙。你也可以像这样更简短地重写它并且它会起作用但是如果谷歌改变地图div的类名，这可能在将来破裂：

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

Answer 2

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

“当全屏模式成功启用时，文件在哪个包含元素接收fullscreenchange事件。什么时候退出全屏模式，文档再次收到 fullscreenchange事件“。

请注意

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

因此，例如，在Mozilla Firefox中，事件处理程序看起来像这样

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

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

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');
  }
}

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

4 个答案: