如何通过Google Maps API拦截全屏控件默认行为实现容器内放大？

嘿，这个需求我之前刚好处理过，咱们一步步来拆解解决：

其实是可以通过监听点击事件来阻止默认的全屏动作的，核心思路是定位到官方全屏控件的DOM元素，绑定点击事件并阻止默认行为，再替换成你自己的容器内放大逻辑。

具体步骤：

1. 初始化地图时，确保启用全屏控件（fullscreenControl: true）；
2. 地图加载完成后，通过类选择器找到全屏控件按钮（Google Maps的全屏控件通常带有gm-control-fullscreen类）；
3. 给按钮添加点击事件，调用event.preventDefault()和event.stopPropagation()阻止默认全屏行为；
4. 在事件处理函数里实现自定义的容器内放大逻辑（比如调整地图缩放级别，或者修改容器尺寸）。

代码示例：

// 初始化地图
const map = new google.maps.Map(document.getElementById('map'), {
  center: { lat: -34.397, lng: 150.644 },
  zoom: 8,
  fullscreenControl: true // 启用官方全屏控件
});

// 等待地图加载完成后定位控件元素
google.maps.event.addListenerOnce(map, 'idle', () => {
  const fullscreenBtn = document.querySelector('.gm-control-fullscreen');
  if (fullscreenBtn) {
    fullscreenBtn.addEventListener('click', (e) => {
      // 阻止默认全屏行为
      e.preventDefault();
      e.stopPropagation();
      
      // 自定义逻辑：让地图在容器内放大两级
      const currentZoom = map.getZoom();
      map.setZoom(currentZoom + 2);
      
      // 可选：如果要调整容器尺寸适配视野
      // const mapContainer = document.getElementById('map');
      // mapContainer.style.width = '100%';
      // mapContainer.style.height = '80vh';
      // map.fitBounds(map.getBounds());
    });
  }
});

⚠️ 注意：Google Maps的DOM类名可能会随API版本更新变化，这个方案存在一定兼容性风险，若API调整控件结构，需要同步修改选择器。

如果担心官方控件结构变动导致拦截失效，最稳妥的方式是隐藏官方全屏控件，自己创建一个样式一致的自定义按钮，完全掌控点击逻辑，甚至不需要用到OverlayView（简单场景下直接用DOM元素更省事）。

具体步骤：

1. 初始化地图时关闭官方全屏控件（fullscreenControl: false）；
2. 在地图容器旁/内部添加自定义按钮，样式模仿官方控件（可以参考Google Maps的控件样式，用文字或SVG图标）；
3. 给自定义按钮绑定点击事件，实现你的容器内放大逻辑。

代码示例：

<!-- 地图容器 -->
<div id="map" style="width: 600px; height: 400px; position: relative;"></div>
<!-- 自定义全屏按钮 -->
<button id="custom-fullscreen-btn" style="position: absolute; top: 10px; right: 10px; padding: 8px; background: white; border: 1px solid #ccc; border-radius: 4px; cursor: pointer;">
  🔍 放大
</button>

// 初始化地图，关闭官方全屏控件
const map = new google.maps.Map(document.getElementById('map'), {
  center: { lat: -34.397, lng: 150.644 },
  zoom: 8,
  fullscreenControl: false
});

// 绑定自定义按钮的点击事件
document.getElementById('custom-fullscreen-btn').addEventListener('click', () => {
  // 自定义放大逻辑：切换容器尺寸+适配视野
  const mapContainer = document.getElementById('map');
  if (mapContainer.style.width === '600px') {
    mapContainer.style.width = '100%';
    mapContainer.style.height = '80vh';
    map.setZoom(map.getZoom() + 1);
  } else {
    mapContainer.style.width = '600px';
    mapContainer.style.height = '400px';
    map.setZoom(map.getZoom() - 1);
  }
  map.fitBounds(map.getBounds());
});

这个方案完全不受Google Maps API更新影响，你可以自由定制按钮样式和行为，灵活性拉满。

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