NextJS中如何动态修改Google Maps标记点颜色？

问题出在你直接给marker.content赋值PinElement对象，而实际上content需要的是DOM元素（即PinElement的element属性）。另外，还需要保存每个标记的初始样式，这样切换聚焦时能恢复其他标记的原始状态。

步骤1：更新MarkerObject类型，保存初始标记内容 #

type MarkerObject = {
    id: number
    marker: google.maps.marker.AdvancedMarkerElement
    originalContent: HTMLElement // 保存初始的Pin DOM元素
}

步骤2：创建标记时保存初始内容 #

修改地图初始化的循环部分，把每个标记的初始Pin元素存起来：

// create markers
for (const location of locations) {
    const pinBackground = new PinElement({
        borderColor: 'black',
        glyphColor: 'black',
    })

    const marker = new AdvancedMarkerElement({
        map,
        position: location.position,
        content: pinBackground.element,
    })
    // 保存初始content到MarkerObject
    setMarkers((prev) => [...prev, { id: location.id, marker, originalContent: pinBackground.element }])
}

步骤3：动态切换标记样式 #

在监听currentFocusId的useEffect中，遍历所有标记，根据ID切换样式：

useEffect(() => {
    if (!markers.length) return

    markers.forEach(markerObj => {
        const isFocused = markerObj.id === currentFocusId
        if (isFocused) {
            // 创建蓝色Pin元素，替换当前标记的content
            const focusedPin = new google.maps.marker.PinElement({
                background: 'blue',
                borderColor: 'black',
                glyphColor: 'black',
            })
            markerObj.marker.content = focusedPin.element
        } else {
            // 恢复为原始样式
            markerObj.marker.content = markerObj.originalContent
        }
    })
}, [currentFocusId, markers])

关键说明 #

• AdvancedMarkerElement.content接收的是HTMLElement，所以必须用PinElement.element而不是PinElement对象本身。
• 保存每个标记的originalContent是为了在取消聚焦时恢复原始样式，避免所有标记都变成蓝色。
• 遍历所有标记而不是只处理当前聚焦的，能确保每次切换时，之前聚焦的标记也能恢复原状。

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