Folium中地图标记中的数字

7
我希望在地图上显示一些地理位置,但是我希望地图图钉图标显示数字而不是默认的地图图钉。有什么办法可以做到吗?
我检查了字体惊人的图标,但它没有起作用。
下面是我的代码:
import folium
m = folium.Map(
    location=[45.3288, -121.6625],
    zoom_start=12,
    #tiles='Mapbox Bright'
)

folium.Marker([45.3288, -121.6625], popup='<i>Mt. Hood Meadows</i>').add_to(m)
folium.Marker([45.3311, -121.7113], popup='<b>Timberline Lodge</b>',icon=folium.Icon(color='red')).add_to(m)
m

enter image description here

我想替换默认的地图标记,使用数字代替 info-sign
类似于这样:

enter image description here

我无法在任何地方找到答案。有关此事的任何线索吗?
在地图标记中显示数字1到9。
3个回答

13

我最近在一项项目中尝试了类似的东西,这就是我想出来的。也许对你有用。

它使用HTML绘制一个DivCon标记,然后在同一位置绘制一个透明的圆形标记。

import folium
from folium.features import DivIcon

m = folium.Map(
    location=[45.3288, -121.6625],
    zoom_start=12,
    #tiles='Mapbox Bright'
)

p1 = [45.3288, -121.6625]
folium.Marker(p1, icon=DivIcon(
        icon_size=(150,36),
        icon_anchor=(7,20),
        html='<div style="font-size: 18pt; color : black">1</div>',
        )).add_to(m)
m.add_child(folium.CircleMarker(p1, radius=15))

p2 = [45.3311, -121.7113]
folium.Marker(p2, icon=DivIcon(
        icon_size=(150,36),
        icon_anchor=(7,20),
        html='<div style="font-size: 18pt; color : black">2</div>',
        )).add_to(m)
m.add_child(folium.CircleMarker(p2, radius=15))

这里输入图片描述


1
有没有一种类似于fontawesome的方式来做类似的事情?(例如,调整此解决方案:https://ourcodeworld.com/articles/read/463/how-to-use-numbers-on-icons-with-fontawesome) - lhoupert

6

根据@bob之前给出的答案,我修改了一下并找到了适合自己需求的解决方案。我把它放在下面,如果对任何人有用的话:

import folium
from folium.features import DivIcon

def number_DivIcon(color,number):
    """ Create a 'numbered' icon
    
    """
    icon = DivIcon(
            icon_size=(150,36),
            icon_anchor=(14,40),
#             html='<div style="font-size: 18pt; align:center, color : black">' + '{:02d}'.format(num+1) + '</div>',
            html="""<span class="fa-stack " style="font-size: 12pt" >>
                    <!-- The icon that will wrap the number -->
                    <span class="fa fa-circle-o fa-stack-2x" style="color : {:s}"></span>
                    <!-- a strong element with the custom content, in this case a number -->
                    <strong class="fa-stack-1x">
                         {:02d}  
                    </strong>
                </span>""".format(color,number)
        )
    return icon

col_hex = ['#440154',
 '#481a6c',
 '#472f7d',
 '#414487',
 '#39568c',
 '#31688e',
 '#2a788e',
 '#23888e',
 '#1f988b',
 '#22a884',
 '#35b779',
 '#54c568',
 '#7ad151',
 '#a5db36',
 '#d2e21b']

num = 0
loc = (43.613, 3.888)

fm = folium.Map(location=loc, tiles="Stamen Terrain")
folium.Marker(
        location=loc,
        popup="Delivery " + '{:02d}'.format(num+1),
        icon=folium.Icon(color='white',icon_color='white'),
        markerColor=col_hex[num],
    ).add_to(fm)
folium.Marker(
        location=loc,
        popup="Delivery " + '{:02d}'.format(num+1),
        icon= number_DivIcon(col_hex[num],num+1)
    ).add_to(fm)

fm

map with colored numbered marker


0

我需要这些数字(1,2)是动态的,也就是说,我有一个for循环,我希望索引值在HTML行中被打印出来。

for point in range(0, len(coordinates_st)):
    # showing number
    folium.Marker(location=[72.89, -124.59+2], icon=DivIcon(
        icon_size=(150, 36),
        icon_anchor=(7, 20),
        html='<div style="font-size: 18pt; color : black">r{point}</div>',
    )).add_to(map_st)

目前你的回答不够清晰,请编辑并添加更多细节,以帮助其他人理解它如何回答问题。你可以在帮助中心找到有关如何编写好答案的更多信息。 - Community

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接