如何在Google Maps高级标记中获取内部点击元素实现路由？

编辑补充：已创建可运行代码示例

我已切换使用Google Maps Advanced Marker，用户点击标记时，标记会展开并显示瑜伽课程详情；再次点击展开后的标记，会跳转至课程活动报名页面，该功能运行正常。

但现在需要在单个标记中展示同一瑜伽场馆的多个即将举办的活动（效果见文末截图）。

问题 #

无法在标记内容的innerHTML中嵌入routerlink或点击事件（已尝试），因此需要另一种方式确定用户选中的标记内活动并实现路由，但目前不知如何操作。

疑问 #

是否可以在AdvancedMarkerElement的回调中获取被点击的元素？若能获取标记内被点击的HTML元素，即可通过元素上的ID等活动相关信息实现对应路由，否则暂无解决思路。

目前实现代码 #

for (const eventMarker of eventMarkers) {

  const AdvancedMarkerElement = new google.maps.marker.AdvancedMarkerElement({
    map,
    // 判断单个经纬度位置下是单活动还是多活动
    content: eventMarker.length === 1 ? this.buildContent(eventMarker) : this.buildContentMultiple(eventMarker),
    position: {
      lat: eventMarker[0].yogaband.latitude,
      lng: eventMarker[0].yogaband.longitude
    }
  });

  AdvancedMarkerElement.addListener("click", () => {
    this.toggleHighlight(AdvancedMarkerElement, id);
  });


}

toggleHighlight(markerView, id) {
  if (markerView.content.classList.contains("highlight")) {
    markerView.content.classList.remove("highlight");
    this.router.navigate(['/events/' + id]);
  } else {
    this.removeHighlight();
    for (const advMarker of this.advancedMarkerElementArray) {
      advMarker.zIndex = 0;
    }
    markerView.content.classList.add("highlight");
    markerView.zIndex = 1;
  }
}

// 构建单活动标记内容
buildContent(eMarker) {
  const content = document.createElement("div");
  content.setAttribute("id", "marker-yogaband-" + eMarker[0].yogaband.name);
  content.classList.add("property");
  content.innerHTML = `
      <div class="icon">
          <div class="title">${eMarker[0].yogaStyle}</div>
          <div class="image"><img style="max-width: 100px; border-radius: 0.275rem" src="${eMarker[0].yogaband.photoUrl}"></div>
      </div>
      <div class="details" style="height: 66px;">
          <div class="text-secondary" style="font-weight: 450 !important; line-height: 1em; font-size: .9rem !important;">
            <span>${formatDate(eMarker[0].date,'M/d/y','en-US')}</span>
          </div>
          <div class="mb-1" style="font-size: 1.25rem!important; font-weight: 450 !important;">
            <span>${eMarker[0].yogaLevel + ' ' + eMarker[0].yogaStyle}</span>
          </div>
          <div class="features">
            <div>
              <i aria-hidden="true" class="fa fa-clock fa-lg feature"></i>
              <span>${formatDate(eMarker[0].date,'h:mm a','en-US')}</span>
            </div>
            <div>
              <i aria-hidden="true" class="fa fa-hourglass-start fa-lg feature"></i>
              <span class="float-end">${eMarker[0].eventLength + ' min'}</span>
            </div>
            <div>
              <i aria-hidden="true" class="fa fa-person fa-lg feature"></i>
              <span>${eMarker[0].maxSize === 0 ? eMarker[0].registrantCount : eMarker[0].registrantCount + '/' + eMarker[0].maxSize}</span>
            </div>
          </div>
      </div>
      `;
  return content;
}

// 构建多活动标记内容
buildContentMultiple(eMarker) {
  const content = document.createElement("div");
  content.setAttribute("id", "marker-yogaband-" + eMarker[0].yogaband.name);
  content.classList.add("property");
  content.classList.add("auto-height");

  let html = `
      <div class="icon">
          <div class="title">${eMarker.length + ' 场活动'}</div>
          <div class="image"><img style="max-width: 100px; border-radius: 0.275rem" src="${eMarker[0].yogaband.photoUrl}"></div>
      </div>
      <div class="details">`;
  let count = 0;
  for (const marker of eMarker) {
    count >= 1 ? html += `<hr>` : '';
    const multMarker =
      `<div class="multi-marker-container">
          <div class="text-secondary" style="font-weight: 450 !important; line-height: 1em; font-size: .9rem !important;">
            <span>${formatDate(marker.date,'M/d/y','en-US')}</span>
          </div>
          <div class="mb-1" style="font-size: 1.25rem!important; font-weight: 450 !important;">
            <span>${marker.yogaLevel + ' ' + marker.yogaStyle}</span>
          </div>
          <div class="features">
            <div>
              <i aria-hidden="true" class="fa fa-clock fa-lg feature"></i>
              <span>${formatDate(marker.date,'h:mm a','en-US')}</span>
            </div>
            <div>
              <i aria-hidden="true" class="fa fa-hourglass-start fa-lg feature"></i>
              <span class="float-end">${marker.eventLength + ' min'}</span>
            </div>
            <div>
              <i aria-hidden="true" class="fa fa-person fa-lg feature"></i>
              <span>${marker.maxSize === 0 ? marker.registrantCount : marker.registrantCount + '/' + marker.maxSize}</span>
            </div>
          </div>
        </div>`;
    html += multMarker;
    count++;
  }

  html += `</div>`;
  content.innerHTML = html;
  return content;
}

效果截图 #

• 地图上的活动
  

• 点击后展开的单活动标记
  

• 点击后展开的多活动标记
  

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