如何修改folium代码实现点击标记显示对应GPX基础折线路径

你只需要修改原代码中的JavaScript点击事件逻辑，移除AntPath相关依赖，改用Leaflet原生的L.polyline创建基础折线即可，具体实现如下：

修改后的完整代码 #

import folium
import pandas as pd

# 假设已初始化dmap地图、mcsub1标记集群，以及包含geo（起点坐标）和geo_path（轨迹坐标数组）的df数据框

# 1. 编写点击事件的JavaScript函数
map_id = dmap.get_name()
click_js = f"""function onClick(e) {{
                 // 获取当前标记绑定的轨迹坐标
                 var coords = e.target.options.pathCoords;
                 
                 // 创建基础折线（可根据需求自定义样式）
                 var basic_polyline = L.polyline(coords, {{
                    "weight": 5,
                    "color": "#0000FF",
                    "opacity": 0.7
                 }});

                 // 移除地图上所有已存在的折线
                 {map_id}.eachLayer(function(layer){{
                    if (layer instanceof L.Polyline)
                       {{ {map_id}.removeLayer(layer) }}
                    }});

                 // 将当前轨迹折线添加到地图
                 basic_polyline.addTo({map_id});
                 }}"""

# 将JS函数注入到地图页面
e = folium.Element(click_js)
html = dmap.get_root()
html.script.add_child(e)

# 2. 添加绑定轨迹坐标的起点标记
for index, data in df.iterrows():
    mrk = folium.Marker(data['geo'], pathCoords=data['geo_path'])
    mrk.add_child(folium.Popup("点击显示轨迹"))
    mrk.add_to(mcsub1)

# 3. 移除原代码中的AntPath插件依赖（无需再引入）

# 显示地图
dmap

关键修改说明 #

• 替换折线创建逻辑：把原代码中的L.polyline.antPath替换为Leaflet原生的L.polyline，样式参数可根据需求调整（比如线宽、颜色、透明度，和folium.PolyLine的参数对应）
• 移除第三方依赖：删除原代码中引入AntPath插件的CDN链接，不再依赖该第三方插件
• 保留核心交互逻辑：保留点击标记时先清除所有现有折线、再添加当前轨迹的逻辑，确保同一时间仅显示一条轨迹

样式自定义提示 #

如果需要和你用folium.PolyLine创建GPX轨迹时的样式完全一致，可调整L.polyline的参数，示例：

var basic_polyline = L.polyline(coords, {{
   "weight": 3,
   "color": "#8B0000",
   "opacity": 0.8,
   "dashArray": "5, 5" // 虚线样式（可选）
}});

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