如何捕获Google Maps Marker的focus事件以实现键盘导航自定义？

Google Maps原生Marker是基于Canvas渲染的图形元素，而非标准DOM节点，因此无法直接监听focus/blur这类DOM焦点事件。默认的键盘导航焦点由地图内部可访问性层处理，不会暴露对应的Marker事件。以下两种方案可实现需求：

方案1：使用自定义DOM Marker（OverlayView） #

通过google.maps.OverlayView创建基于DOM元素的标记，可像普通HTML元素一样监听焦点事件，完全自定义样式与交互：

class DOMMarker extends google.maps.OverlayView {
  constructor(position, map, label) {
    super();
    this.position = position;
    this.map = map;
    this.label = label;
    this.div = null;
    this.setMap(map);
  }

  onAdd() {
    const div = document.createElement('div');
    div.style.position = 'absolute';
    div.style.width = '32px';
    div.style.height = '32px';
    div.style.backgroundImage = 'url(默认图标路径)';
    div.style.outline = 'none';
    div.tabIndex = 0; // 标记元素可聚焦
    div.setAttribute('role', 'button'); // 语义化提升可访问性
    div.setAttribute('aria-label', this.label);

    // 监听焦点事件切换图标
    div.addEventListener('focus', () => {
      div.style.backgroundImage = 'url(聚焦状态图标路径)';
    });
    div.addEventListener('blur', () => {
      div.style.backgroundImage = 'url(默认图标路径)';
    });

    this.div = div;
    this.getPanes().overlayMouseTarget.appendChild(div);
  }

  draw() {
    const point = this.getProjection().fromLatLngToDivPixel(this.position);
    if (point) {
      this.div.style.left = `${point.x - 16}px`;
      this.div.style.top = `${point.y - 32}px`;
    }
  }

  onRemove() {
    this.div.remove();
    this.div = null;
  }
}

// 使用示例
const map = new google.maps.Map(document.getElementById('map'), {
  center: { lat: -34.397, lng: 150.644 },
  zoom: 8,
});
new DOMMarker(new google.maps.LatLng(-34.397, 150.644), map, '示例标记');

方案2：监听地图键盘事件+跟踪焦点状态 #

基于原生Marker，通过监听地图键盘事件结合内部可访问性API判断焦点Marker：

let focusedMarker = null;

// 监听地图容器的Tab键事件
google.maps.event.addDomListener(map.getDiv(), 'keydown', (e) => {
  if (e.key !== 'Tab') return;

  const focusedElement = map.getFocusedElement();
  // 判断当前聚焦元素是否为Marker
  if (focusedElement?.type === 'marker') {
    // 重置上一个聚焦Marker的样式
    if (focusedMarker) focusedMarker.setIcon('默认图标路径');
    // 设置当前聚焦Marker的样式
    focusedMarker = focusedElement.marker;
    focusedMarker.setIcon('聚焦状态图标路径');
  } else {
    // 焦点离开所有Marker时重置
    if (focusedMarker) {
      focusedMarker.setIcon('默认图标路径');
      focusedMarker = null;
    }
  }
});

// 点击地图时清空聚焦状态
map.addListener('click', () => {
  if (focusedMarker) {
    focusedMarker.setIcon('默认图标路径');
    focusedMarker = null;
  }
});

方案对比 #

• 方案1：完全符合DOM交互标准，可访问性更强，样式控制自由，但需自行处理Marker的位置更新、层级等细节。
• 方案2：无需替换原生Marker，但依赖地图内部API，存在未来变更风险。

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