如何在Folium的MarkerCluster中使用企业CI图标

问题背景 #

使用Python Folium库开发地图可视化，通过MarkerCluster聚合门店标记点，当前使用紫色默认图标，需替换为企业CI图标。尝试用CustomIcon实现未达预期，寻求可行方案。

原实现代码 #

1. 数据读取与预处理 #

from folium.plugins import MarkerCluster
import folium
from folium.features import CustomIcon
import pandas as pd
import folium.plugins as plug

df = pd.read_excel('store.xlsx')

df1 = df[['대리점명','Latitude','Longitude']]
df1.rename(columns= {'대리점명':'Store'}, inplace=True)
df1.head()

x = []
y = []
name = []
for i in range(len(df1['Latitude'])):
    if df['Latitude'][i] == 0.0 or df['Longitude'][i] == 0.0:
        pass
    else:
        name.append(df1['Store'][i])
        x.append(df1['Latitude'][i])
        y.append(df1['Longitude'][i])
print('store_sum: ',len(name))
print('x_sum: ',len(x))
print('y_sum: ',len(y))

2. 默认图标地图实现 #

import folium
import folium.plugins as plug
import json

map_store = folium.Map(location=[37.58, 127.0],zoom_start=11.5)

marker_cluster = plug.MarkerCluster().add_to(map_store)

file_name= r'seoul_municipalities_geo.json'
file_name = file_name.replace('\\','/')
with open(file_name, 'rt') as f:
    geo = json.load(f)
    f.close()
folium.GeoJson(geo, name='Store').add_to(map_store)

for i in range(len(x)):
    folium.Marker([x[i],y[i]], popup= name[i], icon=folium.Icon(color='purple', icon='ok-circle')).add_to(marker_cluster)

map_store

当前效果：

失败的CustomIcon尝试代码 #

sub_df = df

latitude = 37.58
longitude = 127.0

mm = folium.Map(
    location=[latitude, longitude],
    zoom_start=11.5
)

coords = sub_df[['Latitude', 'Longitude']]

marker_cluster = MarkerCluster().add_to(mm)

for lat, long in zip(coords['Latitude'], coords['Longitude']):
    icon_path = r"hci.png"
    icon = CustomIcon(
        icon_image=icon_path,
        icon_size=(180, 80),
        icon_anchor=(50, 50),
    )
    marker = folium.Marker(location=[lat, long], icon=icon, popup="대리점명")
    mm.add_child(marker)

mm

异常效果：

可行解决方案 #

关键修正点 #

1. 标记点需添加到MarkerCluster：之前错误地将marker直接添加到地图，而非创建好的marker_cluster，导致聚合失效且图标显示异常。
2. 调整图标锚点与尺寸：根据CI图标实际比例调整icon_size和icon_anchor，锚点建议设为图标底部中点，确保定位准确。
3. 确保图片路径正确：本地图片需放在脚本同级目录，或使用绝对路径；在线图标直接传入URL即可。
4. 保留无效坐标过滤：避免无效标记点干扰地图显示。

修正后的完整代码 #

from folium.plugins import MarkerCluster
import folium
from folium.features import CustomIcon
import pandas as pd
import json

# 读取并处理数据
df = pd.read_excel('store.xlsx')
df1 = df[['대리점명','Latitude','Longitude']]
df1.rename(columns= {'대리점명':'Store'}, inplace=True)

# 过滤无效坐标
valid_data = df1[(df1['Latitude'] != 0.0) & (df1['Longitude'] != 0.0)]

# 初始化地图
map_store = folium.Map(location=[37.58, 127.0], zoom_start=11.5)

# 添加MarkerCluster
marker_cluster = MarkerCluster().add_to(map_store)

# 添加GeoJson图层
file_name = 'seoul_municipalities_geo.json'
with open(file_name, 'rt') as f:
    geo = json.load(f)
folium.GeoJson(geo, name='Store').add_to(map_store)

# 自定义CI图标参数
icon_path = "hci.png"  # 确保图片在当前目录
icon = CustomIcon(
    icon_image=icon_path,
    icon_size=(40, 40),  # 根据实际图标尺寸调整，建议缩小避免遮挡
    icon_anchor=(20, 40),  # 设置为图标底部中点，确保定位准确
)

# 添加标记点到MarkerCluster
for idx, row in valid_data.iterrows():
    folium.Marker(
        location=[row['Latitude'], row['Longitude']],
        popup=row['Store'],
        icon=icon
    ).add_to(marker_cluster)

# 保存或显示地图
map_store.save('store_map.html')
map_store

额外提示 #

• 图标显示模糊时，建议使用20-60px尺寸的网页适配PNG图标。
• 在线图标可直接替换icon_path为图标URL，无需本地文件。
• 可通过popup=folium.Popup(row['Store'], max_width=300)优化弹窗样式。

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