首页 / Leaflet / 使用示例
全屏
把地图容器铺满视口，切换后重新计算尺寸，Esc 退出，三步就能避免半屏白块。
源码与运行效果
说明
示例用 position: fixed; inset: 0 把整个演示容器铺满视口，
这是 iframe 环境里最稳的做法：浏览器原生 Fullscreen API 在未授权的 iframe 中会被拒绝。
生产页面可以换成 requestFullscreen，但容器尺寸变化的处理完全相同。
| 步骤 | 代码 | 不做会怎样 |
|---|---|---|
| 切换容器尺寸 | 加 position: fixed 或全屏 API | 地图仍按旧尺寸渲染 |
| 重算地图 | map.invalidateSize() | 瓦片错位、右侧留白、控制按钮跑偏 |
| 延迟一帧 | setTimeout(..., 60) | 尺寸还没稳定，读到的仍是旧值 |
同理，地图从隐藏状态（弹窗、Tab 页、折叠面板）切到可见时，也要调用一次
invalidateSize()。Leaflet 初始化时读到容器高度为 0，之后不会自动修正。
原生全屏需要用户手势触发，且 iframe 要带 allow="fullscreen"。
移动端浏览器对全屏的支持不一致，用 CSS 铺满的降级方案兼容性更好。