将文本添加到Folium FastMarkerCluster标记？

Question

使用以下代码，我尝试在我的folium FastMarkerCluster标记中添加文本。下面的代码会生成一个地图，但是没有成功添加文本。该文本作为字符串包含在每个lon lat对应的数据中。

我认为问题与包含文本列的df是一个pandas系列对象有关。据我所知，在这种情况下应该使用'df.columnname'来指定。然而，这并没有起作用。我还尝试将该列转换为列表，但是也没有成功。非常感谢任何提示。

xlat = guns2013['latitude'].tolist()
xlon = guns2013['longitude'].tolist()
locations = list(zip(xlat, xlon))
map2 = folium.Map(location=[38.9, -77.05], tiles='CartoDB dark_matter', 
zoom_start=1)
marker_cluster = MarkerCluster().add_to(map2)
for point in range(0, len(locations)):
   folium.Marker(locations[point], 
   popup='guns2013.texts'[point]).add_to(marker_cluster)

map2

- OgnjanD

---

请注意，您正在使用 MarkerCluster 而不是 FastMarkerCluster。当使用 FastMarkerCluster 时，您可以传递一个 JavaScript 回调函数来设置标记的样式（例如更改图标），但我不确定是否可以添加弹出窗口。 请参阅此处：https://medium.com/@bobhaffner/folium-markerclusters-and-fastmarkerclusters-1e03b01cb7b1 - jackdbd

Answer 1

我试着操作了一下，最终你可以这样将弹出框从 Python 传递到callback函数：

some_map = folium.Map(location=[df['latitude'].mean(), 
   df['longitude'].mean()], 
 zoom_start=9)
               
callback = ('function (row) {' 
                'var marker = L.marker(new L.LatLng(row[0], row[1]), {color: "red"});'
                'var icon = L.AwesomeMarkers.icon({'
                "icon: 'info-sign',"
                "iconColor: 'white',"
                "markerColor: 'green',"
                "prefix: 'glyphicon',"
                "extraClasses: 'fa-rotate-0'"
                    '});'
                'marker.setIcon(icon);'
                "var popup = L.popup({maxWidth: '300'});"
                "const display_text = {text: row[2]};"
                "var mytext = $(`<div id='mytext' class='display_text' style='width: 100.0%; height: 100.0%;'> ${display_text.text}</div>`)[0];"
                "popup.setContent(mytext);"
                "marker.bindPopup(popup);"
                'return marker};')
                             
some_map.add_child(FastMarkerCluster(df[['latitude', 'longitude','use_code_name']].values.tolist(), callback=callback))

- Filip Michalsky

---

你知道是否可以将多个文本添加到弹出窗口中吗？例如：df[['latitude', 'longitude','use_code_name1','use_code_name2','use_code_name3']？ - Maverick

@Maverick：你可以简单地将这3列合并成一个（使用str.join或任何你喜欢的逻辑），然后使用这个新列。不是吗？ - Eric Duminil

使用这个回调函数时，我在浏览器中遇到了XSS问题和警告。我发布了一个更新的版本来避免这个问题。 - Boss Boyd

Answer 2

当然，答案来了。也许这可以帮助面对相同问题的人。如果文本没有被映射，请检查包含它的 df 是否不是 pandas series 对象，如果是，则使用第一行将其转换为 pandas df。其余部分都可以正常工作。

df_text = df_old[['texts']]

xlat = guns2013['latitude'].tolist()
xlon = guns2013['longitude'].tolist()
locations = list(zip(xlat, xlon))
map2 = folium.Map(location=[38.9, -77.05], tiles='CartoDB dark_matter', 
zoom_start=1)
marker_cluster = MarkerCluster().add_to(map2)
try:
   for point in range(0, len(locations)):
   folium.Marker(locations[point], popup = folium.Popup(df_text['texts'] 
   [point])).add_to(marker_cluster)    
except:
   pass
map2

- OgnjanD

---

这不是FastMarkerCluster，对吧？ - Eric Duminil

Answer 3

这是对@Filip Michalsky提供的答案进行修改的版本，避免了我在使用那个解决方案时遇到的一些XSS/安全问题。

some_map = folium.Map(location=[df['latitude'].mean(), 
   df['longitude'].mean()], 
 zoom_start=9)
               
callback = ('function (row) {'
            'var marker = L.marker(new L.LatLng(row[0], row[1]), {color: "red"});'
            'var icon = L.AwesomeMarkers.icon({'
            "icon: 'info-sign',"
            "iconColor: 'white',"
            "markerColor: 'green',"
            "prefix: 'glyphicon',"
            "extraClasses: 'fa-rotate-0'"
            '});'
            'marker.setIcon(icon);'
            "var popup = L.popup({maxWidth: '300'});"
            "const display_text = {text: row[2]};"
            "var mytext = L.DomUtil.create('div', 'display_text');"
            "mytext.textContent = display_text.text;"
            "popup.setContent(mytext);"
            "marker.bindPopup(popup);"
            'return marker};')
                             
some_map.add_child(FastMarkerCluster(df[['latitude', 'longitude','use_code_name']].values.tolist(), callback=callback))

- Boss Boyd