Folium如何实现点击配对标记中任意一个时高亮整对标记

现有包含1000余条记录的CSV文件，每条记录对应一组配对的地理位置：

• 到达点坐标：loc_list[0], loc_list[1]
• 出发点坐标：loc_list[2], loc_list[3]

点击配对位置标记中的任意一个时，自动高亮该组对应的两个位置标记。
当前使用的基础代码片段：

folium.Marker([loc_list[0],loc_list[1]], icon=folium.Icon(color='green'), popup='<strong>Trip {}</strong>'.format(LOCATION_COUNT)).add_to(m)
folium.Marker([loc_list[2],loc_list[3]], icon=folium.Icon(color='red'), popup='<strong>Trip {}</strong>'.format(LOCATION_COUNT)).add_to(m)

Folium生成的地图底层基于Leaflet，通过给同组标记打统一标识、结合事件委托注入JS交互逻辑即可实现，1000+条数据场景下也不会有性能问题。

1. 处理每条行程记录时，给同组的到达点、出发点标记添加相同的行程组标识，区分标记类型
2. 所有标记加载完成后，注入全局点击事件：点击标记时先重置所有标记为默认样式，再将同组两个标记切换为高亮样式

可直接复用的代码如下：

# 循环处理每条CSV行程记录时，按如下方式创建两个标记
# 先定义默认、高亮的图标配置
default_arrive = folium.Icon(color='green')
default_depart = folium.Icon(color='red')
highlight_icon = folium.Icon(color='orange', icon='star')

# 创建到达点标记
arrive_marker = folium.Marker(
    location=[loc_list[0], loc_list[1]],
    icon=default_arrive,
    popup=f'<strong>Trip {LOCATION_COUNT}</strong>',
    tooltip=f'行程{LOCATION_COUNT} 到达点'
)
# 给到达点标记DOM注入组标识
arrive_marker.add_child(folium.Element(f'''
<script>
const curArrive = document.currentScript.parentElement;
curArrive.classList.add(`trip-group-${LOCATION_COUNT}`);
curArrive.dataset.tripId = {LOCATION_COUNT};
curArrive.dataset.markerType = 'arrive';
</script>
'''))
arrive_marker.add_to(m)

# 创建出发点标记
depart_marker = folium.Marker(
    location=[loc_list[2], loc_list[3]],
    icon=default_depart,
    popup=f'<strong>Trip {LOCATION_COUNT}</strong>',
    tooltip=f'行程{LOCATION_COUNT} 出发点'
)
# 给出发点标记DOM注入相同的组标识
depart_marker.add_child(folium.Element(f'''
<script>
const curDepart = document.currentScript.parentElement;
curDepart.classList.add(`trip-group-${LOCATION_COUNT}`);
curDepart.dataset.tripId = {LOCATION_COUNT};
curDepart.dataset.markerType = 'depart';
</script>
'''))
depart_marker.add_to(m)

所有标记全部添加到地图后，注入全局交互逻辑：

# 所有标记加载完成后执行
m.add_child(folium.Element('''
<script>
window.addEventListener('load', () => {
    const allMarkers = document.querySelectorAll('.leaflet-marker-icon');
    const mapContainer = document.querySelector('.folium-map');

    // 用事件委托处理点击，避免给上千个标记单独绑事件影响性能
    mapContainer.addEventListener('click', (e) => {
        const clicked = e.target.closest('.leaflet-marker-icon');
        if (!clicked?.dataset.tripId) return;
        const targetTripId = clicked.dataset.tripId;

        // 所有标记恢复默认颜色
        allMarkers.forEach(marker => {
            if (!marker.dataset.markerType) return;
            marker.classList.remove('orange', 'star');
            marker.classList.add(marker.dataset.markerType === 'arrive' ? 'green' : 'red');
        })

        // 同组两个标记切换高亮
        document.querySelectorAll(`.trip-group-${targetTripId}`).forEach(marker => {
            marker.classList.remove('green', 'red');
            marker.classList.add('orange', 'star');
        })
    })
})
</script>
'''))

高亮效果可以自行调整，比如修改图标颜色、替换图标形状、添加缩放动效都可以，直接修改对应class和样式规则即可。

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