Google Maps API v3 - 如何检测地图何时更改为全屏模式? [英] Google Maps API v3 - how to detect when map changes to full screen mode?

问题描述

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

Is there a way to detect when the user clicks the default fullscreen mode button?

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

These are the map options I'm using:

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

推荐答案

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

I'm not sure if you want to detect the actual click event or just the state change between full screen and not. I needed to do the latter. The two things you need to know are that a) when the map size changes, the map will fire the bounds_changed event and b) within your event handler for that, you need to compare the map div's size with the size of the entire screen. Do this like so:

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 更改地图 div 的类名，这在未来可能会中断:

Note that getDiv() returns your own div that you passed to the Map() constructor. That div doesn't get resized for full screen - its child does. So that part where I'm getting the child of the map's div is correct but a little unwieldy. You could also rewrite that more briefly like this and it will work but this could break in the future if Google changes the map div's class name:

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

这篇关于Google Maps API v3 - 如何检测地图何时更改为全屏模式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！