Могу ли я получить элемент, нажатый на элемент расширенного маркера Google Maps?
(РЕДАКТИРОВАНИЕ) - Я создал работоспособный образец кода в соответствии с запросом Пример кода jsfiddle
Я переключился на расширенные маркеры Google Maps, и внутри каждого маркера, если пользователь нажимает на него, он расширяется и отображает сведения о занятиях йогой. Если пользователь еще раз нажмет на развернутый маркер, он перенаправит его на страницу мероприятия класса, где он сможет зарегистрироваться.
Это отлично работает!
Но теперь мне нужно отображать несколько событий класса в одном маркере на случай, если в студии йоги пройдет несколько мероприятий в одном месте. (фото в самом низу).
Проблема. Я не могу встроить ссылку маршрутизатора или событие щелчка во внутренний HTML-код, который устанавливается на содержимое маркера (я пробовал), поэтому мне нужен другой способ определить, какое событие было выбрано пользователем внутри маркера, а затем направить его кстати, я просто не знаю, как это сделать?
Вопрос. Я подумал, что может быть способ щелкнуть элемент в обратном вызове AdvancedMarkerElement? Если бы я мог получить элемент HTML, по которому щелкнули внутри маркера, я мог бы получить идентификатор или что-то, имеющее отношение к событию, а затем соответствующим образом маршрутизировать его, иначе я не понимаю, как это сделать.
Вот что я делаю до сих пор.
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;
}События на карте
Одно событие внутри маркера после его щелчка (развернутого)
Несколько событий внутри маркера после его щелчка (развернутого)
пожалуйста, отредактируйте свой вопрос и включите минимальный воспроизводимый пример и проголосуйте за повторное открытие, чтобы этот вопрос/ответ можно было сохранить, поскольку я считаю, что он может быть полезен другим.
@MrUpsidown Я добавил образец рабочего кода по вашему запросу.
Ответы 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" для обозначения двух событий.
Теперь в обработчике событий click вы можете получить идентификатор события щелчка:
AdvancedMarkerElement.addListener("click", (e) => {
console.info(e.domEvent.target.dataset.eventId) // logs "1" or "2"
});
e.domEvent.target — HTML-элемент, по которому был сделан щелчок. dataset.eventId — это значение data-event-id.
Если ваш HTML содержит дочерние элементы, вы также можете добавить data-event-id к дочерним элементам или использовать JS, чтобы найти родительский элемент, который имеет идентификатор события при нажатии на дочерний элемент.
Какой смысл создавать нерабочий фрагмент кода? Вы должны предоставить минимально воспроизводимый пример, позволяющий воспроизвести проблему.