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

Question

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

我发现 this answer 有人这样说：

Documentation says:

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

If doesnt work, use this instead:

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

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

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

另外，the documentation 没有提到这个事件。

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

Answer 1

这个其实很简单。您不需要来自 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);

Answer 2

我知道这是一个迟到的回应，但对于未来的任何人来说，这就是我处理它的方式（对于 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

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

How to detect when Mapbox/Leaflet enters or exits fullscreen mode

leaflet

mapbox

mapbox-gl-js