在标记标签点击上触发谷歌标记点击侦听器

Question

我有一个 Google 地图应用程序，它显示一些带有自定义标签的标记。我想在用户单击标签时触发标记单击侦听器，而不仅仅是单击标记图标。但是，我找不到使用 Google Maps API 来实现这一点的方法。有没有办法实现这个功能？

这是我用来创建标记和标签的代码：

async function createMarker(object) {
    // Create marker
    const marker = new google.maps.Marker({
        position: object.Position,
        map,
        icon: getIcon(object.Direction),
        label: generateMarkerLabel(object.Name)
    });
    // Add listener
    marker.addListener("click", function () {
        focusOn(marker);
        ShowMarkerRouteViewBtn.click();
    });

    // Returns the marker created
    return marker;
}

function generateMarkerLabel(markerName) {
    return {
        text: markerName,
        fontSize: "10px",
        className: "marker-label"
    };
}

问题在于标签不是标记的一部分，而是地图上的单独叠加层。因此，单击标签不会触发标记单击侦听器。如何使标签可点击并触发标记点击侦听器？任何帮助，将不胜感激。谢谢。

Answer 1

您的

generateMarkerLabel

函数返回一个 JavaScript 对象，但目前尚不清楚如何将其附加到 DOM。

快速修复 — 将

click

事件 绑定到

.marker-label

元素并 触发标记的

click

事件:

// ideally attached shortly after the label element has been attached to the DOM 
const mLabel = document.querySelector('.marker-label');

mLabel.addEventListener('click', (evt => {
   google.maps.event.trigger(marker, 'click');
}));