我可以获取在我的谷歌地图高级标记元素中单击的元素吗？

Question

我切换到谷歌地图高级标记，如果用户单击标记，它会在每个标记内部展开并显示瑜伽课程详细信息。如果用户再次单击展开的标记，则会将他们路由到可以注册的班级活动页面。

这很好用！

但现在我需要在单个标记中显示多个班级活动，以防瑜伽工作室在同一位置出现多个活动。 （图片在最底部）。

问题 - 我无法将路由器链接或单击事件嵌入到设置为标记内容的innerHtml中（我已经尝试过），所以我需要另一种方法来确定用户在标记内选择了什么事件，并且然后那样走，我只是不知道该怎么做？

问题 - 我在想可能有一种方法可以在 AdvancedMarkerElement 回调中单击元素？如果我可以获得在标记内单击的 HTML 元素，我可以获得 id 或与事件相关的内容，然后进行相应的路由，否则我不知道如何执行此操作。

这是我到目前为止正在做的事情。

for (const eventMarker of eventMarkers) {

  const AdvancedMarkerElement = new google.maps.marker.AdvancedMarkerElement({
    map,
    // this check determines if there is 1 event or multiple at a single location (lat/lng) on the 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;
  }
}

// build marker for a single event at specific lat/lng
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;
}

// build marker for multiple events at a specific lat/lng
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 + ' Events'}</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" (click)="routeToEvent(${marker.id})">
          <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;
}

地图上的活动

单击（展开）后标记内的单个事件

单击（展开）标记后，标记内会发生多个事件

Answer 1

您可以在

click

事件处理程序中访问所需的任何数据。

例如，您可以通过这种方式创建活动 HTML 内容：

<div class="event" data-event-id="1">
  Beginner Bikram
</div>

<div class="event" data-event-id="2">
  Beginner Ashtanga
</div>

这里我使用

data-event-id="1"

和

data-event-id="2"

来识别 2 个事件。

现在在您的

click

事件处理程序中，您可以获取单击的事件 id：

AdvancedMarkerElement.addListener("click", (e) => {
  console.log(e.domEvent.target.dataset.eventId) // logs "1" or "2"
});

e.domEvent.target

是被单击的 HTML 元素。

dataset.eventId

是

data-event-id

的值。

如果你的HTML包含子元素，你也可以给子元素添加

data-event-id

，或者使用JS找到子元素被点击时有事件id的父元素。