如何在Dash Leaflet弹窗中显示带链接的多行内容？

核心方案：用Dash原生HTML组件构建弹窗 #

Dash Leaflet的Popup组件默认会转义纯文本中的HTML标签，直接拼接字符串（含<br>或链接标签）自然失效。正确做法是嵌套Dash的HTML组件来构建弹窗内容：

代码示例 #

假设你的数据结构如下：

marker_data = [
    {"name": "商铺A", "price": "¥5000/月", "link": "https://example.com/shopA", "lat": 39.9, "lon": 116.4},
    {"name": "商铺B", "price": "¥6500/月", "link": "https://example.com/shopB", "lat": 39.91, "lon": 116.41}
]

构建带正确弹窗的地图：

import dash_leaflet as dl
from dash import html, Dash

app = Dash(__name__)

app.layout = dl.Map(
    children=[
        dl.TileLayer(),  # 基础底图
        # 循环生成标记点及弹窗
        *[dl.Marker(
            position=[item["lat"], item["lon"]],
            children=dl.Popup(
                children=[
                    html.P(f"名称: {item['name']}"),  # 名称行
                    html.P(f"价格: {item['price']}"),  # 价格行
                    html.A("查看详情", href=item["link"], target="_blank")  # 跳转链接
                ]
            )
        ) for item in marker_data]
    ],
    style={"height": "100vh"}
)

if __name__ == "__main__":
    app.run_server(debug=True)

备选方案：关闭HTML转义（不推荐） #

如果坚持用HTML字符串拼接，需要设置Popup的sanitize=False参数，关闭标签转义：

dl.Popup(
    children=f"名称: {item['name']}<br>价格: {item['price']}<br><a href='{item['link']}' target='_blank'>查看详情</a>",
    sanitize=False
)

⚠️ 注意：此方式存在XSS安全风险，仅在信任数据源的场景下使用。

问题根源解析 #

你之前的尝试失效，是因为Dash Leaflet默认会对传入Popup的纯文本内容进行HTML转义，<br>、<a>等标签会被转换成普通文本显示，而非渲染成换行或可点击链接。使用Dash原生HTML组件时，框架会直接渲染对应的DOM元素，自然支持换行和链接交互。

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