如何在点击Google Maps Marker标签时触发其点击监听器？

由于Google Maps的内置Marker标签是独立于Marker的覆盖层，点击标签不会默认触发Marker的点击监听器，以下两种方案可以解决这个问题：

方案一：监听标签DOM元素，手动触发Marker点击事件 #

Google Maps会为每个Marker的标签生成对应的DOM元素，我们可以通过标签的className找到这些元素，绑定点击事件后手动触发Marker的click()方法。

实现步骤： #

1. 确保标签的className可识别（你代码中已设置为marker-label）
2. 监听地图容器的DOM变化，捕获标签元素的创建
3. 为标签元素绑定点击事件，调用对应Marker的click()方法

代码示例： #

首先在initMap函数后添加DOM变化监听：

function initMap(mapId, centerLatitude, centerLongitude, mapZoomLevel) {
    mapCenter = { lat: centerLatitude, lng: centerLongitude };
    mapZoom = mapZoomLevel;
    map = new google.maps.Map(document.getElementById(mapId), {
        center: mapCenter,
        ...MAP_OPTIONS,
        zoom: mapZoom,
    });

    // 监听地图容器的DOM变化，捕获标签元素
    const mapContainer = document.getElementById(mapId);
    const observer = new MutationObserver((mutations) => {
        mutations.forEach(mutation => {
            mutation.addedNodes.forEach(node => {
                if (node.classList?.contains('marker-label')) {
                    node.style.cursor = 'pointer';
                    // 通过坐标匹配找到对应Marker
                    const labelPos = map.getProjection().fromContainerPixelToLatLng(
                        new google.maps.Point(node.offsetLeft, node.offsetTop)
                    );
                    const matchingMarker = markers.find(marker => {
                        const pos = marker.getPosition();
                        return pos.lat().toFixed(6) === labelPos.lat().toFixed(6) &&
                               pos.lng().toFixed(6) === labelPos.lng().toFixed(6);
                    });
                    if (matchingMarker) {
                        node.addEventListener('click', () => matchingMarker.click());
                    }
                }
            });
        });
    });
    observer.observe(mapContainer, { childList: true, subtree: true });
}

方案二：使用自定义OverlayView实现可点击标签 #

如果内置标签限制较多，可以用Google Maps的OverlayView创建完全自定义的标签，直接控制DOM元素和事件逻辑。

实现示例： #

// 自定义标签Overlay类
class CustomMarkerLabel extends google.maps.OverlayView {
    constructor(marker, labelText) {
        super();
        this.marker = marker;
        this.labelText = labelText;
        this.div = null;
        this.setMap(marker.getMap());
    }

    onAdd() {
        // 创建标签DOM
        this.div = document.createElement('div');
        this.div.className = 'custom-marker-label';
        this.div.textContent = this.labelText;
        this.div.style.cursor = 'pointer';
        this.div.style.position = 'absolute';
        this.div.style.fontSize = '10px';
        
        // 绑定点击事件触发Marker点击
        this.div.addEventListener('click', () => this.marker.click());

        // 添加到地图覆盖层容器
        const panes = this.getPanes();
        panes.overlayImage.appendChild(this.div);
    }

    draw() {
        // 根据Marker位置计算标签坐标
        const projection = this.getProjection();
        const position = projection.fromLatLngToDivPixel(this.marker.getPosition());
        // 调整标签位置（示例为Marker下方20px处）
        this.div.style.left = `${position.x - this.div.offsetWidth / 2}px`;
        this.div.style.top = `${position.y + 20}px`;
    }

    onRemove() {
        if (this.div) {
            this.div.parentNode.removeChild(this.div);
            this.div = null;
        }
    }
}

// 修改createMarker函数，替换内置标签为自定义Overlay
async function createMarker(object) {
    const marker = new google.maps.Marker({
        position: object.Position,
        map,
        icon: getIcon(object.Direction)
        // 移除内置label配置
    });
    // 添加自定义标签
    new CustomMarkerLabel(marker, object.Name);

    marker.addListener("click", function () {
        focusOn(marker);
        ShowMarkerRouteViewBtn.click();
    });

    return marker;
}

自定义标签CSS示例： #

.custom-marker-label {
    background-color: rgba(255,255,255,0.9);
    padding: 2px 4px;
    border-radius: 2px;
    border: 1px solid #ccc;
    white-space: nowrap;
}

注意事项 #

• 方案一使用MutationObserver比setTimeout更可靠，能准确捕获标签元素的创建时机
• 方案二的draw方法会自动处理地图缩放、Marker移动时的标签位置更新
• 两种方案均兼容MarkerClusterer，Marker被聚类后标签会自动隐藏

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