如何在Folium中创建与Marker独立的侧边滑动数据窗口？

核心思路 #

Folium基于Leaflet实现，这类右侧滑窗功能需要结合自定义HTML容器和Leaflet JavaScript事件来实现，和Layer/LayerControl无关，步骤如下：

• 在地图页面添加一个固定在右侧的隐藏面板（滑窗）
• 给每个标记绑定点击事件，触发时填充面板内容、显示面板，同时高亮当前标记
• 处理标记切换逻辑：点击新标记时重置上一个标记的样式，更新面板内容

代码实现示例 #

1. 完整修改后的代码 #

import sys
!{sys.executable} -m pip install folium pandas geocoder
import geocoder
import folium
import pandas as pd

# 假设你的classDiffColour函数已定义
def classDiffColour(row):
    # 示例逻辑：根据条件返回颜色，可根据实际需求修改
    return 'blue' if row.get('Type') == 'A' else 'red'

# 获取当前位置并创建地图
g = geocoder.ip('me')
location = g.latlng
obsMap = folium.Map(location, zoom_start=2)

# 添加右侧滑窗的HTML容器
sidebar_html = """
<div id="sidebar" style="position: fixed; top: 0; right: -300px; width: 300px; height: 100%; background: white; box-shadow: -2px 0 5px rgba(0,0,0,0.3); transition: right 0.3s ease; padding: 20px; z-index: 1000;">
    <h3 id="obs-name">选择一个标记</h3>
    <p id="obs-details"></p>
    <button onclick="closeSidebar()">关闭</button>
</div>
"""
obsMap.get_root().html.add_child(folium.Element(sidebar_html))

# 添加处理点击事件的JavaScript
sidebar_js = """
// 存储当前选中的标记
let selectedMarker = null;

// 打开滑窗并填充内容
function openSidebar(name, details) {
    const sidebar = document.getElementById('sidebar');
    document.getElementById('obs-name').textContent = name;
    document.getElementById('obs-details').textContent = details;
    sidebar.style.right = '0';
}

// 关闭滑窗
function closeSidebar() {
    const sidebar = document.getElementById('sidebar');
    sidebar.style.right = '-300px';
    // 重置选中标记样式
    if (selectedMarker) {
        selectedMarker.setStyle({color: selectedMarker.originalColor});
        selectedMarker = null;
    }
}

// 绑定标记点击事件
function bindMarkerClick(marker, name, details, originalColor) {
    marker.on('click', function() {
        // 重置上一个选中标记的样式
        if (selectedMarker) {
            selectedMarker.setStyle({color: selectedMarker.originalColor});
        }
        // 高亮当前标记
        this.setStyle({color: 'yellow', weight: 3});
        selectedMarker = this;
        selectedMarker.originalColor = originalColor;
        // 打开滑窗
        openSidebar(name, details);
    });
}
"""
obsMap.get_root().script.add_child(folium.Element(sidebar_js))

# 读取数据并创建标记
observations = pd.read_csv('observations.csv')
observations['Marker Colour'] = observations.apply(classDiffColour, axis=1)

for idx, observation in observations.iterrows():
    # 创建CircleMarker
    marker = folium.CircleMarker(
        location=[observation['Latitude'], observation['Longitude']],
        tooltip=observation['Name'],
        color=observation['Marker Colour'],
        radius=6
    ).add_to(obsMap)
    
    # 自定义要显示的详情内容，可拼接多个字段
    details = f"纬度: {observation['Latitude']}\n经度: {observation['Longitude']}\n描述: {observation.get('Description', '无')}"
    # 生成绑定事件的JS代码
    bind_js = f"bindMarkerClick({marker.get_name()}, '{observation['Name']}', '{details}', '{observation['Marker Colour']}');"
    obsMap.get_root().script.add_child(folium.Element(bind_js))

obsMap

关键细节说明 #

• 滑窗样式：通过CSS固定定位在右侧，初始隐藏（right: -300px），点击时通过JS修改right值实现平滑滑动效果
• 标记高亮：存储标记的原始颜色，点击时切换为高亮色（示例用黄色加粗），切换标记或关闭滑窗时恢复原始样式
• 事件绑定：利用Folium的get_name()获取标记对应的Leaflet对象名，通过自定义JS函数绑定点击事件，传递标记的信息

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