如何偏移Folium中DivIcon标记文本至多边形标记的右侧？

你可以通过修改folium.DivIcon的HTML样式，使用CSS的transform或position属性实现文本相对标记的偏移，彻底解决地图缩放时的错位问题。

修改后的文本标记代码： #

fg.add_child(folium.Marker(
    location=[data['latitude'], data['longitude']],
    popup=popup,
    icon=folium.DivIcon(html=f"""<div style="font-family: calibri; color: #ECF0F1; font-weight: bold; font-size: 8px; transform: translateX(-20px);">{data['airport']}</div>""")
))

map1.add_child(fg)

关键说明： #

• transform: translateX(-20px)：该属性将文本向左平移指定像素（数值可根据标记大小调整），平移是相对文本自身位置的，完全不受地图缩放影响，从根源解决缩放错位问题。
• 若需更精细控制，也可改用position: relative配合left属性，效果一致：

  position: relative; left: -20px;
  

完整整合示例： #

将方形标记与偏移文本标记绑定到同一坐标，通过CSS实现相对位置：

# 添加方形标记
folium.RegularPolygonMarker(
    [data["latitude"], data["longitude"]],
    number_of_sides=4,
    rotation=45,
    radius=12,
    popup=data["airport"],
    fill_opacity=1,
    fill=True,
    fill_color=color,
    edge_width='1',
    color='black',
    tooltip=data['airport']
).add_to(map1)

# 添加左侧偏移的文本标记
fg = folium.FeatureGroup()
fg.add_child(folium.Marker(
    location=[data['latitude'], data['longitude']],
    popup=popup,
    icon=folium.DivIcon(html=f"""<div style="font-family: calibri; color: #ECF0F1; font-weight: bold; font-size: 8px; transform: translateX(-20px);">{data['airport']}</div>""")
))
map1.add_child(fg)

你可以根据方形标记的半径微调translateX的数值，比如半径12时，-20px左右即可让文本刚好在左侧不重叠，实际测试后调整更精准。

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