更新Google Maps时如何避免页面表单元素被抢占焦点

• 方案1：替换setCenter为panTo方法
  大多数场景下直接替换map.setCenter(pos)为map.panTo(pos)即可解决问题。panTo在目标坐标处于当前视口范围内时会执行平滑位移，不会触发地图容器的焦点获取逻辑，对非交互地图的适配性更好。
• 方案2：初始化地图时禁用容器焦点属性
  非交互模式的地图建议在初始化时直接添加focusable: false配置，从根源上禁止地图容器获得焦点，自然不会出现抢占表单焦点的问题。示例代码：

  const map = new google.maps.Map(document.getElementById("map-container"), {
    // 原有配置，比如缩放级别、基础样式、非交互相关配置
    zoom: 12,
    gestureHandling: "none", // 非交互模式标配，禁用所有地图手势
    disableDefaultUI: true,
    // 新增关键配置
    focusable: false
  });
  

• 方案3：手动保留原有焦点
  如果必须使用setCenter且不便修改地图初始化配置，可以在执行坐标更新前先记录当前页面的聚焦元素，更新完成后再把焦点切回原元素：

  const currentFocus = document.activeElement;
  map.setCenter(pos);
  // 校验原元素支持focus方法再恢复焦点，避免报错
  currentFocus?.focus?.();
  

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