如何使用Folium的MarkerCluster在地图上直接显示订单数而非弹窗

已适配现有开发基础 #

• 兼容已完成的pandas、folium库导入逻辑
• 兼容已完成的订单CSV读取、缺失经纬度行清洗流程
• 保留原有MarkerCluster点位聚合能力、原有弹窗展示功能
• 全缩放级别支持数值直观展示：缩小时聚合块显示簇内总订单数，放大到点位打散时显示单个点位订单数

实现步骤 #

1. 补充导入需要的Folium组件

from folium.features import DivIcon

2. 替换原有MarkerCluster初始化、点位添加逻辑，通过自定义DivIcon渲染文本数值，通过icon_create_function自定义聚合块的数值展示：

# 初始化美国区域底图，可根据自己的经纬度范围调整初始定位和缩放级别
m = folium.Map(location=[39.8283, -98.5795], zoom_start=4, tiles='CartoDB Positron')

# 初始化带自定义聚合数值展示的MarkerCluster
marker_cluster = MarkerCluster(
    icon_create_function="""
    function(cluster) {
        // 统计当前聚合簇覆盖的所有点位总订单量
        let totalOrders = 0;
        cluster.getAllChildMarkers().forEach(marker => {
            totalOrders += marker.options.orderCount;
        });
        // 按订单量区间匹配聚合块尺寸，可根据自身数据分布调整阈值
        let size = totalOrders > 1000 ? '50px' : totalOrders > 200 ? '40px' : '30px';
        return L.divIcon({
            html: '<div style="background-color:rgba(49,130,189,0.8);color:white;border-radius:50%;width:'+size+';height:'+size+';display:flex;align-items:center;justify-content:center;font-weight:bold;">'+totalOrders+'</div>',
            className: 'marker-cluster',
            iconSize: L.point(size, size)
        });
    }
    """
).add_to(m)

# 遍历清洗完成的数据集，替换原有点位添加逻辑
# 注意把列名替换成你自己数据集里对应的字段名：lat/lon/order_count
for _, row in df.iterrows():
    # 保留原有弹窗内容，可自行扩展弹窗展示的字段
    popup_content = folium.Popup(f"区域订单数：{row['order_count']}", max_width=300)
    # 定义单个点位的数值展示样式，可自行调整颜色、字体、边框样式
    point_icon = DivIcon(
        icon_size=(30, 30),
        icon_anchor=(15, 15),
        html=f'<div style="font-size:12px;font-weight:bold;color:#c82423;text-align:center;background:#fff;border:1px solid #c82423;border-radius:4px;padding:2px 4px;">{row["order_count"]}</div>'
    )
    # 添加点位到聚合簇，绑定订单数属性供聚合统计使用
    folium.Marker(
        location=[row['lat'], row['lon']],
        popup=popup_content,
        icon=point_icon,
        orderCount=row['order_count']
    ).add_to(marker_cluster)

# 输出/保存地图即可
m

自定义调整说明 #

• 聚合块、单个点位的颜色、字体大小、圆角、尺寸阈值都可以根据实际数据分布修改，适配视觉需求
• 不需要额外安装第三方依赖，所有能力基于原生Folium实现
• 原有MarkerCluster的聚合、打散交互完全保留，点击弹窗的交互也不受影响

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