如何检测 Mapbox/Leaflet 何时进入或退出全屏模式答案

【问题标题】：How to detect when Mapbox/Leaflet enter or exit fullscreen mode如何检测 Mapbox/Leaflet 何时进入或退出全屏模式
【发布时间】：2018-04-20 00:14:40
【问题描述】：

如何检测 Mapbox 或 Leaflet 何时进入或退出全屏模式？

我找到了this answer，有人这样说：

文档说：

map.on('fullscreenchange', function () {
    if (map.isFullscreen()) {
        console.log('entered fullscreen');
    } else {
        console.log('exited fullscreen');
    }
});

如果不起作用，请改用它：

map.on('enterFullscreen', function(){
});

map.on('exitFullscreen', function(){
});

我尝试过，以及事件类型参数的一些变体。没有骰子。

另外，the documentation 没有提及此事件。

请注意，我使用的是 Mapbox GL JS。

【问题讨论】：

比较 Mapbox GL JS 和 Leaflet 就像比较苹果和橘子。它们是完全不同的项目，具有不同的代码库和不同的 API。如果您使用 Mapbox GL JS，请参阅mapbox.com/mapbox-gl-js/api/#fullscreencontrol 的 API 文档。就目前而言，FullscreenControl 没有触发任何事件。用例是什么？
我需要在从全屏退出时触发 Angular 2+ 更改检测。
你能提供一些代码吗？

标签： leaflet mapbox mapbox-gl-js

【解决方案1】：

我知道这是一个迟到的回应，但对于未来的任何人来说，这都是我处理它的方式（对于 mapbox GL JS（没有传单）。

map.on("resize", () => {
    if (document.fullscreenElement) // do something
});

您可以为地图包装器 div 命名，并专门检查地图是否是触发全屏事件的原因

map.on("resize", () => {
    if (document.fullscreenElement?.attributes.name.value === "mapWrapper") // do something
});

如果你使用 React，你可以使用状态来保存这些信息。

const [isFullScreen, setIsFullScreen] = useState();
...
map.on("resize", () => {
  setIsFullScreen(
    document.fullscreenElement?.attributes.name.value === "mapWrapper"
  );
});
...
if (isFullScreen) //do something

【讨论】：

【解决方案2】：

这其实很简单。你不需要 Leaflet 或 Mapbox 的任何东西。只需在文档对象上使用事件侦听器即可。

let fullScreenChange;  

if ('onfullscreenchange' in window.document) {
  fullScreenChange = 'fullscreenchange';
} else if ('onmozfullscreenchange' in window.document) {
  fullScreenChange = 'mozfullscreenchange';
} else if ('onwebkitfullscreenchange' in window.document) {
  fullScreenChange = 'webkitfullscreenchange';
} else if ('onmsfullscreenchange' in window.document) {
  fullScreenChange = 'MSFullscreenChange';
}

function onFullscreenChange() {
   // Your stuff.
}

window.document.addEventListener(fullScreenChange, onFullscreenChange);

【讨论】：