Google Maps API全屏模式下保持地图边界不变的技术求助

核心思路 #

地图容器在全屏切换时尺寸会发生变化，Google Maps默认会自动调整视图适配新尺寸，导致原边界偏移。我们需要监听全屏状态变化事件，在切换完成后重新调用fitBounds锁定目标边界，同时用防抖函数避免频繁触发，提升性能。

修改后的代码 #

function initMap() {
  // 定义固定目标边界
  const targetBounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(39.051937, -84.721402),
    new google.maps.LatLng(39.219590, -84.366564)
  );

  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 13,
    center: targetBounds.getCenter(),    
    zoomControl: true,
    zoomControlOptions: {
      position: google.maps.ControlPosition.LEFT_CENTER,
    },
    scaleControl: false,
    streetViewControl: false,
    fullscreenControl: true
  });

  // 初始化适配边界
  map.fitBounds(targetBounds);

  // 防抖函数：避免频繁执行fitBounds
  function debounce(func, delay = 300) {
    let timeoutId;
    return (...args) => {
      clearTimeout(timeoutId);
      timeoutId = setTimeout(() => func.apply(this, args), delay);
    };
  }

  // 重新适配边界的逻辑
  const reapplyBounds = debounce(() => {
    map.fitBounds(targetBounds);
  });

  // 监听各浏览器全屏状态变化事件
  document.addEventListener('fullscreenchange', reapplyBounds);
  document.addEventListener('webkitfullscreenchange', reapplyBounds);
  document.addEventListener('mozfullscreenchange', reapplyBounds);
  document.addEventListener('msfullscreenchange', reapplyBounds);

  // 可选：监听窗口resize事件，普通窗口调整大小时也保持边界
  window.addEventListener('resize', reapplyBounds);
}

window.initMap = initMap;

关键修改说明 #

• 将目标边界提取为全局常量，确保后续可重复调用
• 加入防抖函数：防止全屏切换过程中尺寸多次变动导致fitBounds频繁执行
• 兼容所有主流浏览器的全屏事件：覆盖标准及带前缀的全屏变化事件
• 可选的窗口resize监听：如果需要普通窗口调整大小时也保持边界，保留此监听；不需要可直接移除

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