Google Maps高级标记：HTML链接触发标记点击功能失效求助

问题原因 #

新版AdvancedMarkerElement基于Web Components实现，采用标准DOM事件系统，和旧版Marker的Google Maps专属事件机制完全不同：

• 旧版的google.maps.event.trigger无法触发新标记的事件
• 直接调用marker.click()不会传递正确的事件上下文，导致绑定的InfoWindow逻辑不执行

解决方案 #

方案1：复用InfoWindow打开逻辑（推荐） #

避免模拟点击事件，直接封装打开InfoWindow的方法，存入标记数组，通过HTML链接调用该方法：

1. 创建标记时封装关联逻辑

// 全局数组存储标记及对应的操作
const mapMarkers = [];

// 动态生成标记示例
function initMarkers(positionList) {
  positionList.forEach((position, index) => {
    // 创建高级标记
    const marker = new google.maps.marker.AdvancedMarkerElement({
      map: yourMapInstance, // 替换为你的地图实例
      position: position,
      title: `地点${index + 1}`
    });

    // 创建对应信息窗口
    const infoWindow = new google.maps.InfoWindow({
      content: `<div>这里是地点${index + 1}的详情</div>`
    });

    // 标记原生点击事件
    marker.addEventListener('click', () => {
      infoWindow.open({ anchor: marker, map: yourMapInstance });
      yourMapInstance.panTo(position); // 可选：自动移动地图到标记位置
    });

    // 将标记、信息窗口和打开方法存入数组
    mapMarkers.push({
      marker,
      infoWindow,
      showInfo: () => {
        infoWindow.open({ anchor: marker, map: yourMapInstance });
        yourMapInstance.panTo(position);
      }
    });
  });
}

2. 绑定HTML链接点击事件

$('.goToMarker').on('click', function(e) {
  e.preventDefault(); // 阻止默认跳转行为
  const markerIndex = $(this).data('markerindex');
  if (mapMarkers[markerIndex]) {
    mapMarkers[markerIndex].showInfo(); // 直接调用封装的方法
  }
});

方案2：模拟DOM点击事件（不推荐） #

如果必须模拟标记的点击行为，需要构造标准DOM事件并触发：

$('.goToMarker').on('click', function(e) {
  e.preventDefault();
  const markerIndex = $(this).data('markerindex');
  const targetMarker = mapMarkers[markerIndex].marker;
  
  // 构造并触发标准click事件
  const clickEvent = new Event('click');
  targetMarker.dispatchEvent(clickEvent);
});

这种方式依赖标记的事件绑定逻辑，不如方案1直接可控，所以优先推荐方案1。

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