将鼠标悬停在 Folium 的弹出窗口中

Question

用这样一个简单的例子：

import folium

map_1 = folium.Map(location=[45.372, -121.6972], zoom_start=12,
                   tiles='Stamen Terrain')
folium.Marker([45.3288, -121.6625], popup='Mt. Hood Meadows').add_to(map_1)
map_1

鼠标放上去就能弹出弹窗吗？ 这可以用大叶吗？

Answer 1

更新答案

事实证明，这个功能已经被放入 folium 的代码库中了。

只需添加

tooltip

参数，如下所示：

import folium

map_1 = folium.Map(location=[45.372, -121.6972], zoom_start=12, tiles='Stamen Terrain',
                   tooltip = 'This tooltip will appear on hover' # THIS
                  )
folium.Marker([45.3288, -121.6625], popup='Mt. Hood Meadows').add_to(map_1)
map_1

Answer 2

你不能用大叶轻松做到这一点。但由于 folium 确实创建了 LeafletJS 代码，您可以修改输出以使其工作。为此，您必须将这个答案：

中所述的代码添加到生成的html中

    marker.bindPopup("Popup content");
    marker.on('mouseover', function (e) {
        this.openPopup();
    });
    marker.on('mouseout', function (e) {
        this.closePopup();
    });

如果你有很多标记，这可能会成为一项艰巨的任务，但你可以通过 python 来完成（尽管它看起来不太漂亮）。伪代码：

import re

with open("map.html") as inf:
    txt = inf.read()

#Find all the markers names given by folium
markers = re.findall(r'\bmarker_\w+', txt)

for marker in markers:
   # Add the code given before to the string txt

# Save the new map
with open("new_map.html", "w") as outf:
    outf.write(txt)

此代码打开生成的 html 文件，找到所有标记，并为每个标记添加代码。

Answer 3

在下面的示例中，弹出窗口在鼠标悬停时打开，而不是单击时打开，并在用户鼠标移出时隐藏它：

map_1.save('map_1.html')
import re
import fileinput

with open("map_1.html") as inf:
   txt = inf.read()

#Find all the markers names given by folium
markers = re.findall(r'\bmarker_\w+', txt)
markers = list(set(markers))

for linenum,line in enumerate( fileinput.FileInput("map_1.html",inplace=1) ):
    pattern = markers[0] + ".bindPopup"
    pattern2 = markers[0] + ".on('mouseover', function (e) {this.openPopup();});"
    pattern3 = markers[0] + ".on('mouseout', function (e) {this.closePopup();});"

    if pattern in line:
       print(line.rstrip())
       print(pattern2)
       print(pattern3)
    else:
       print(line.rstrip())

Answer 4

你的问题是关于folium，我不这么认为，但我认为你可以添加一些Javascript（我怀疑使用jquery会非常容易），来模拟点击事件

onmouseover

或

mouseenter 

  var test = document.getElementById("test");

  test.addEventListener("mouseenter", handlerClickFunction);

Answer 5

如果工具提示功能不够（例如，您想在弹出窗口中包含表格或图表），您可以修改 Popup 类以添加此答案中提到的行。

from folium import Popup
from folium.features import Template

class HoverPopup(Popup):
    _template = Template(
        """
        var {{this.get_name()}} = L.popup({{ this.options|tojson }});

        {% for name, element in this.html._children.items() %}
            {% if this.lazy %}
                {{ this._parent.get_name() }}.once('click', function() {
                    {{ this.get_name() }}.setContent($(`{{ element.render(**kwargs).replace('\\n',' ') }}`)[0]);
                });
            {% else %}
                var {{ name }} = $(`{{ element.render(**kwargs).replace('\\n',' ') }}`)[0];
                {{ this.get_name() }}.setContent({{ name }});
            {% endif %}
        {% endfor %}

        {{ this._parent.get_name() }}.bindPopup({{ this.get_name() }})
        {% if this.show %}.openPopup(){% endif %};
        
        // New code *************
        {{ this._parent.get_name() }}.on('mouseover', function (e) {
            this.openPopup();
        });
        {{ this._parent.get_name() }}.on('mouseout', function (e) {
            this.closePopup();
        });
        // End new code *************

        {% for name, element in this.script._children.items() %}
            {{element.render()}}
        {% endfor %}
    """
    ) 

然后您可以像普通弹出窗口一样使用它

import folium

map_1 = folium.Map(location=[45.372, -121.6972], zoom_start=12)

hp = HoverPopup('Mt. Hood Meadows')
folium.Marker([45.3288, -121.6625], popup=hp).add_to(map_1)
map_1

与之前的答案相比，这个答案的优点是它不需要事后修改 HTML，并且可以在 Jupyter 笔记本等环境中工作。

如果弹出窗口中有交互性，您可以删除以下行，并且当鼠标移开标记时它不会消失。然后，用户可以使用 x 或单击地图来关闭弹出窗口。

{{ this._parent.get_name() }}.on('mouseout', function (e) {
    this.closePopup();
});