Folium地图文本与标记重叠问题的解决方案咨询

1. 调整DivIcon锚点与尺寸，偏移文本位置 #

当前代码中icon_size设为(0,0)、icon_anchor设为(0,0)，导致文本直接覆盖在坐标点上。可以通过设置合理的尺寸和锚点，将文本偏移到标记点的旁边（比如上方）：

import folium
from folium.features import DivIcon

m = folium.Map(location=[gpsLati, gpsLong], zoom_start=16)

for i in range(len(testtest2)):
    folium.CircleMarker(
        [testtest2.iloc[i][2], testtest2.iloc[i][3]],
        color='black'
    ).add_to(m)

for i in range(len(testtest2)):
    folium.map.Marker(
        [testtest2.iloc[i][2], testtest2.iloc[i][3]],
        icon=DivIcon(
            icon_size=(120, 30),  # 匹配文本容器的实际宽高
            icon_anchor=(60, 40),  # 锚点设为文本中心下方，对应标记点位置，让文本显示在标记上方
            html='<div style="font-size: 1.2rem; color: black; background-color:rgba(255,255,255,0.8); width:120px; text-align:center; margin:0; padding:2px; border-radius:3px;"><b>' + testtest2['routeno'][i] + '</b></div>'
        )
    ).add_to(m)

m

• icon_size：设置为文本容器的实际宽高，确保Folium能正确计算元素布局
• icon_anchor：(60,40)表示文本容器的中心（120的一半是60）下方40px处对应地图坐标点，避免文本覆盖标记点

2. 动态交替文本偏移方向 #

如果标记点距离极近，可给每个标记的文本设置不同的偏移方向，交替放在标记的上下左右：

import folium
from folium.features import DivIcon

m = folium.Map(location=[gpsLati, gpsLong], zoom_start=16)

# 定义多种偏移锚点，循环使用
offset_anchors = [(60, 40), (60, -20), (-20, 0), (140, 0)]  # 上、下、左、右

for i in range(len(testtest2)):
    folium.CircleMarker(
        [testtest2.iloc[i][2], testtest2.iloc[i][3]],
        color='black'
    ).add_to(m)

for i in range(len(testtest2)):
    # 循环选择偏移方向
    anchor = offset_anchors[i % len(offset_anchors)]
    folium.map.Marker(
        [testtest2.iloc[i][2], testtest2.iloc[i][3]],
        icon=DivIcon(
            icon_size=(120, 30),
            icon_anchor=anchor,
            html='<div style="font-size: 1.2rem; color: black; background-color:rgba(255,255,255,0.8); width:120px; text-align:center; margin:0; padding:2px; border-radius:3px;"><b>' + testtest2['routeno'][i] + '</b></div>'
        )
    ).add_to(m)

m

3. 优化文本样式减少视觉重叠 #

• 缩小字体：将font-size调整为1rem，减少文本占用空间
• 添加文本阴影：在style中加入text-shadow: 0 0 2px white;，即使轻微重叠也能看清内容
• 简化文本：如果线路编号过长，考虑截断或使用缩写

4. 用MarkerCluster聚合密集标记 #

如果标记点本身非常密集，使用MarkerCluster聚合近距离标记，放大后再显示单个文本：

import folium
from folium.features import DivIcon
from folium.plugins import MarkerCluster

m = folium.Map(location=[gpsLati, gpsLong], zoom_start=16)
marker_cluster = MarkerCluster().add_to(m)

for i in range(len(testtest2)):
    folium.CircleMarker(
        [testtest2.iloc[i][2], testtest2.iloc[i][3]],
        color='black'
    ).add_to(marker_cluster)

for i in range(len(testtest2)):
    folium.map.Marker(
        [testtest2.iloc[i][2], testtest2.iloc[i][3]],
        icon=DivIcon(
            icon_size=(120, 30),
            icon_anchor=(60, 40),
            html='<div style="font-size: 1.2rem; color: black; background-color:rgba(255,255,255,0.8); width:120px; text-align:center; margin:0; padding:2px; border-radius:3px;"><b>' + testtest2['routeno'][i] + '</b></div>'
        )
    ).add_to(marker_cluster)

m

内容的提问来源于stack exchange，提问作者데이지