Google Maps API v3 - 如何檢測地圖何時變爲全屏模式？

有沒有辦法檢測用戶何時單擊默認的全屏模式按鈕？Google Maps API v3 - 如何檢測地圖何時變爲全屏模式？

這是我使用的地圖選項：

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

來源

2016-09-21 Carlos

我有同樣的問題。查看我的解決方案 - > https://stackoverflow.com/questions/47699755/toogle-fullscreen-view-event-for-google-maps/47700054#47700054 – MEGApixel23

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

「當全屏模式成功經營，該文件，其中包含該元素將收到全屏幕更改事件。退出全屏模式時，該文檔將再次收到「全屏幕更換事件」。

請注意，

「目前並不是所有的瀏覽器都使用API的前綴的版本」。

所以，舉例來說，在Mozilla Firefox瀏覽器的事件處理程序是這樣的

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

來源

2016-09-22 05:41:07

我不知道，如果你要檢測的實際點擊的事件或只是全屏的狀態變化並不是。我需要做後者。你需要知道的兩件事情是：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) {

來源

2016-12-01 00:49:02 DaveBurns

當地圖被平移時也會觸發'bounds_changed'事件/縮放而不改變爲全屏 – Philipp

該解決方案是爲我工作：

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

來源

2017-08-17 09:50:45 eballo

Google Maps API v3 - 如何檢測地圖何時變爲全屏模式？

回答

相關問題