如何让Folium地图填满Shiny for Python卡片容器高度？

要解决Folium地图无法填满Shiny卡片高度的问题，你可以通过以下步骤实现类似R中bslib::as_fill_carrier()的效果：

核心思路 #

1. 让Folium地图的HTML容器占满100%高度和宽度
2. 使用Shiny的填充容器工具，让地图响应卡片的高度设置

可复现代码示例 #

from shiny import App, ui, render, fill
import folium
import htmltools

# 定义UI
app_ui = ui.page_fluid(
    ui.card(
        # 设置卡片高度，也可以用"100%"占满父容器空间
        fill.as_fillable_container(
            ui.output_ui("folium_map"),
            style="height: 600px;"
        )
    )
)

# 定义服务器逻辑
def server(input, output, session):
    @output
    @render.ui
    def folium_map():
        # 创建基础Folium地图
        m = folium.Map(location=[45.5236, -122.6750], zoom_start=13)
        
        # 获取地图的HTML代码，修改容器样式为100%宽高
        map_html = m._repr_html_()
        map_html = map_html.replace(
            '<div class="folium-map"',
            '<div class="folium-map" style="height:100%;width:100%;"'
        )
        
        # 将HTML包装为可填充容器
        return fill.as_fillable_container(htmltools.HTML(map_html))

# 启动应用
app = App(app_ui, server)

关键说明 #

• fill.as_fillable_container()：让地图容器能够继承父元素（卡片）的高度设置，实现自适应填充
• 修改Folium的HTML容器样式：默认Folium地图的div没有设置100%高度，手动添加style="height:100%;width:100%;"确保它填满可用空间
• 卡片高度设置：可以根据需求设置固定高度（如600px）或相对高度（如100%），地图会自动适配

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