You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何为Folium的Popup弹出框设置最小宽度与最大宽度

问题根因

你的宽度设置不生效,核心错误是把min_width参数直接传给了folium.Marker。这个参数是folium.Popup类的专属参数,Marker构造方法不会识别这个传参,传入后会被直接丢弃,完全不会作用到弹出框上。
另外Folium底层的Leaflet库默认给弹出框加了自动折行的CSS规则,哪怕宽度设置足够,长文本也会被强制换行,必须额外加样式覆盖默认规则,才能实现「仅在手动添加<br>标签的位置换行」的效果。

可直接运行的修正代码

把你原来循环生成Marker的部分替换成下面的代码即可,宽度数值可以根据自己的内容长度调整:

# 创建底图
map_obj = folium.Map(
    location=[41.8, -72.4],
    zoom_start=8
)

# 循环绘制点位
for _, jobs in df_mod.iterrows():
    # 拼接弹出内容,外层套div关闭自动折行
    popup_content = f'''
    <div style="white-space: nowrap;">
        <b>Status: </b>{jobs['Status']}<br>
        <b>Product: </b>{jobs['Type']}<br>
        <b>Contact: </b>{jobs['Contact']}
    </div>
    '''
    # 单独初始化Popup对象,配置宽度规则
    job_popup = folium.Popup(
        html=popup_content,
        min_width=250, # 自定义最小宽度,单位px
        max_width=700  # 自定义最大宽度,单位px,避免内容过长撑出可视区域
    )
    # 生成点位标记
    folium.Marker(
        location=[jobs['Latitude'], jobs['Longitude']],
        popup=job_popup,
        tooltip=jobs['Job'],
        icon=folium.Icon(color=jobs['Color'], prefix='fa', icon='circle')
    ).add_to(map_obj)

# 展示地图
map_obj
关键配置说明
  • 不要直接把HTML字符串传给Marker的popup参数,必须先创建folium.Popup实例,所有和弹出框尺寸、交互相关的参数都要在初始化Popup的时候传入
  • 外层div的white-space: nowrap样式用来覆盖Leaflet默认的自动换行逻辑,保证没有手动加<br>的文本始终保持单行
  • 不建议把min_width设到1000这么大,小屏设备上会出现弹出框超出屏幕显示不全的问题,根据自身内容的最长单行长度设置数值即可

内容的提问来源于stack exchange,提问作者Ryan

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.29 02:15:39