如何为folium地图添加类LayerControl行为的可折叠文本框？

直接上可落地的方案——利用folium的branca模块自定义控件，完全复刻LayerControl的外观和折叠行为，同时让文本面板固定在地图控件区域，随导航始终显示：

完整代码示例 #

import folium
from branca.element import Element, MacroElement

class InfoControl(MacroElement):
    def __init__(self, title="信息说明", content="", position="topright"):
        super().__init__()
        self.title = title
        self.content = content
        self.position = position
        
        # 构造仿LayerControl的HTML/CSS/JS
        self._template = Element("""
        <div class="leaflet-control-layers leaflet-control" style="display: block;">
            <a class="leaflet-control-layers-toggle" href="#" title="{{ this.title }}"></a>
            <div class="leaflet-control-layers-list" style="display: none;">
                <h4>{{ this.title }}</h4>
                <div style="padding: 10px; line-height: 1.5;">
                    {{ this.content }}
                </div>
            </div>
        </div>
        <script>
            (function(){
                var control = document.querySelector('.leaflet-control-layers:last-child');
                var toggle = control.querySelector('.leaflet-control-layers-toggle');
                var list = control.querySelector('.leaflet-control-layers-list');
                
                toggle.onclick = function(e) {
                    e.preventDefault();
                    list.style.display = list.style.display === 'none' ? 'block' : 'none';
                };
                
                // 绑定到地图控件位置
                var map = window{{ this._parent.get_name() }};
                map.controls.add(L.control.position('{{ this.position }}').addControl(control));
            })();
        </script>
        """)

# 创建地图实例
m = folium.Map(location=[45.523, -122.675], zoom_start=13)

# 定义说明内容（支持HTML格式）
info_content = """
<b>数据源说明</b><br>
- 基础地图：OpenStreetMap<br>
- 自定义图层：本地GeoJSON数据<br>
<b>使用方法</b><br>
1. 点击右上角图层控件切换显示内容<br>
2. 点击本面板折叠/展开说明<br>
3. 拖拽地图、滚轮缩放导航
"""

# 添加自定义信息控件
info_control = InfoControl(title="地图说明", content=info_content, position="topright")
m.add_child(info_control)

# 保存地图
m.save("map_with_info.html")

关键细节说明 #

• 外观匹配：直接复用folium默认的leaflet-control-layers类，确保和LayerControl的边框、折叠按钮、字体样式完全一致
• 折叠功能：通过JS实现点击切换面板显示/隐藏，逻辑和原生LayerControl完全相同
• 固定位置：通过Leaflet的控件定位系统固定在指定位置（默认右上角，和LayerControl同区域），随地图导航始终保持可见，不会被地图内容遮挡
• 内容灵活：支持HTML格式的文本，可添加加粗、换行、列表等格式，满足复杂说明需求

调整建议 #

• 如果想把面板放到左上角，修改position参数为topleft即可
• 若要调整面板宽度、内边距等样式，直接修改HTML里的style属性
• 内容可以动态生成，比如从外部文件读取数据源说明后传入控件

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