如何自定义Folium标记样式并在标记内添加数字（非BeautifyIcon方案）

直接用folium.DivIcon就能实现标记内带数字的效果，完全不需要第三方插件，还能自由定制样式（颜色、大小、形状等），核心思路是通过HTML/CSS定义标记的外观，把数字嵌入进去。

基础实现示例 #

下面是最基础的带数字圆形标记代码：

import folium
from folium.plugins import MarkerCluster

# 创建地图实例
m = folium.Map(location=[39.9042, 116.4074], zoom_start=12)
marker_cluster = MarkerCluster().add_to(m)

# 自定义带数字的DivIcon
def create_number_icon(number, bg_color="#3388ff", text_color="white", size="30px"):
    html = f"""
    <div style="
        background-color: {bg_color};
        border-radius: 50%;
        width: {size};
        height: {size};
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        font-size: {str(int(float(size.replace('px',''))*0.6))}px;
        color: {text_color};
        border: 2px solid white;
        box-shadow: 0 0 5px rgba(0,0,0,0.3);
    ">
        {number}
    </div>
    """
    return folium.DivIcon(html=html)

# 添加带数字的标记
folium.Marker(
    location=[39.9042, 116.4074],
    icon=create_number_icon(1, bg_color="#ff5733"),
    popup="标记1"
).add_to(marker_cluster)

folium.Marker(
    location=[39.915, 116.403],
    icon=create_number_icon(2, bg_color="#33ff57"),
    popup="标记2"
).add_to(marker_cluster)

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

关键细节说明 #

• DivIcon的html参数直接传入自定义的HTML代码，用CSS控制标记的样式：
  • border-radius: 50%把标记做成圆形，改成0就是方形
  • bg_color控制标记背景色，可根据业务场景动态调整（比如按分类、数值区间设置）
  • 用display: flex实现数字在标记内的垂直水平居中
  • 通过font-size的比例计算，让数字大小适配标记尺寸

结合现有MarkerCluster逻辑 #

如果你已经有一套用folium.Marker和MarkerCluster创建不同颜色标记的代码，只需要把原来的icon参数替换成上面的create_number_icon函数返回的DivIcon即可，完全兼容原有集群逻辑。

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