移除Google Maps V3中tabindex属性的问题求助

我来帮你搞定这个困扰！你之前用tilesloaded事件修改a标签tabindex的方法没生效，大概率是这几个原因：

• tilesloaded触发太早，地图里的一些交互组件（比如缩放按钮、街景控件）还没完全渲染出来
• Google Maps在用户拖拽、缩放地图时，会重新生成部分DOM元素，你只在加载时改一次，后续新生成的元素又会恢复tabindex
• 你只处理了a标签，但地图组件里还有按钮、输入框等其他带tabindex的元素

试试这个更靠谱的方案：

步骤1：封装tabindex移除函数 #

先写一个通用函数，处理地图容器内所有元素的tabindex：

function clearMapTabIndexes() {
  // 选中地图容器下的所有元素
  const mapElements = document.querySelectorAll('#map *');
  
  mapElements.forEach(element => {
    // 两种方式选一个：要么直接移除tabindex属性，要么设置为-1
    element.removeAttribute('tabindex');
    // 或者用 element.setAttribute('tabindex', '-1');
  });
}

步骤2：绑定到多个地图事件 #

把函数绑定到地图的多个关键事件上，确保地图加载完成、用户交互后都能重新处理：

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

// 绑定事件：地图加载稳定后触发
google.maps.event.addListener(MAP, 'idle', clearMapTabIndexes);
// 拖拽地图结束后触发
google.maps.event.addListener(MAP, 'dragend', clearMapTabIndexes);
// 缩放级别变化后触发
google.maps.event.addListener(MAP, 'zoom_changed', clearMapTabIndexes);

额外提示 #

如果你的地图里有自定义控件不想被影响，可以给自定义控件加个专属类（比如custom-map-control），然后在函数里加个判断：

function clearMapTabIndexes() {
  const mapElements = document.querySelectorAll('#map *');
  
  mapElements.forEach(element => {
    if (!element.classList.contains('custom-map-control')) {
      element.removeAttribute('tabindex');
    }
  });
}

这样就能确保所有Google Maps自带的组件都失去tabindex，不会干扰页面的Tab导航啦！

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