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

我来帮你搞定这个全屏检测的问题——你试过的官方事件没生效，大概率是踩了配置时机或者依赖的坑，下面分两种地图库给你拆解正确的实现方式，还有兜底方案：

先确认核心前提 #

不管是Mapbox GL JS还是Leaflet，全屏功能都依赖对应的模块：

• Mapbox GL JS v1.0+ 内置全屏功能，但要确保初始化时没禁用全屏控件；
• Leaflet 本身没有原生全屏，必须引入Leaflet.fullscreen插件（这是社区最常用的全屏扩展）。

Mapbox GL JS 正确实现步骤 #

1. 确保地图初始化配置正确
   初始化时不要关闭全屏控制（默认是开启的，除非你手动设为false）：

   const map = new mapboxgl.Map({
     container: 'map',
     style: 'mapbox://styles/mapbox/streets-v12',
     center: [-74.5, 40],
     zoom: 9,
     fullscreenControl: true // 显式开启，避免意外关闭
   });
   

2. 正确绑定事件（必须等地图加载完成）
   一定要在地图load事件触发后再绑定全屏事件，否则地图实例还没完全初始化，事件会失效：

   map.on('load', () => {
     map.on('fullscreenchange', () => {
       if (map.isFullscreen()) {
         console.log('✅ 地图进入全屏模式');
       } else {
         console.log('❌ 地图退出全屏模式');
       }
     });
   });
   

Leaflet 正确实现步骤 #

1. 引入全屏插件并添加控件
   先确保你已经引入了Leaflet.fullscreen的JS和CSS文件，然后在地图初始化时添加全屏控件：

   const map = L.map('map').setView([51.505, -0.09], 13);
   L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
   // 添加全屏控件到地图
   L.control.fullscreen().addTo(map);
   

2. 绑定全屏事件
   Leaflet的全屏插件提供了两种事件绑定方式，选一种就行：

   // 方式1：分别监听进入/退出事件
   map.on('enterFullscreen', () => {
     console.log('✅ 进入全屏');
   });
   map.on('exitFullscreen', () => {
     console.log('❌ 退出全屏');
   });
   
   // 方式2：统一监听状态变化
   map.on('fullscreenchange', () => {
     map.isFullscreen() 
       ? console.log('✅ 当前处于全屏') 
       : console.log('❌ 当前非全屏');
   });
   

常见坑点排查 #

如果还是没生效，检查这几点：

• 事件绑定时机不对：不要在地图初始化前就绑定事件，必须等地图ready（Leaflet）或load（Mapbox）事件触发后再操作；
• 浏览器权限拦截：浏览器不允许脚本自动触发全屏，必须由用户手动点击全屏按钮触发，否则事件不会触发；
• 版本不兼容：Leaflet的全屏插件要和Leaflet主版本匹配，比如Leaflet 1.9.x要对应最新版的Leaflet.fullscreen；
• 容器元素问题：确保地图容器的ID和代码里的一致，避免全屏触发在错误的元素上。

兜底方案：监听浏览器原生全屏事件 #

如果上述方法都不行，可以直接监听浏览器的原生fullscreenchange事件，判断全屏元素是不是你的地图容器：

document.addEventListener('fullscreenchange', () => {
  const mapContainer = document.getElementById('map');
  const isMapFullscreen = document.fullscreenElement === mapContainer;
  
  if (isMapFullscreen) {
    console.log('✅ 地图进入全屏');
  } else if (!document.fullscreenElement) {
    console.log('❌ 地图退出全屏');
  }
});

内容的提问来源于stack exchange，提问作者BBaysinger