如何在首次与Google Maps交互时触发文档全屏？

架构老林

2026-7-23

解决方案

核心思路

浏览器要求全屏请求必须由直接的用户交互事件触发（比如点击、触摸开始），dragstart这类事件不在浏览器认可的触发范围内。同时Google Maps会拦截容器上的原生事件，所以必须通过Maps API自身的事件监听机制来绑定交互事件。

具体实现

绑定Google Maps支持的用户交互事件（如click、touchstart）到地图实例上
在事件回调中调用浏览器全屏API，处理不同浏览器的前缀兼容

示例代码：

// 初始化地图实例
const map = new google.maps.Map(document.getElementById('map'), {
  center: { lat: -34.397, lng: 150.644 },
  zoom: 8,
});

// 绑定点击事件（适配桌面端）
google.maps.event.addListener(map, 'click', () => {
  toggleFullscreen();
});

// 绑定触摸开始事件（适配移动端，贴合拖动场景）
google.maps.event.addListener(map, 'touchstart', () => {
  toggleFullscreen();
});

// 全屏切换函数（含状态判断，避免重复触发）
function toggleFullscreen() {
  const isFullscreen = document.fullscreenElement ||
                       document.webkitFullscreenElement ||
                       document.mozFullScreenElement ||
                       document.msFullscreenElement;

  const docEl = document.documentElement;
  if (!isFullscreen) {
    if (docEl.requestFullscreen) {
      docEl.requestFullscreen();
    } else if (docEl.webkitRequestFullscreen) {
      docEl.webkitRequestFullscreen();
    } else if (docEl.mozRequestFullScreen) {
      docEl.mozRequestFullScreen();
    } else if (docEl.msRequestFullscreen) {
      docEl.msRequestFullscreen();
    }
  }
}