重叠坐标的对开本弹出文本问题（更新：HTML源代码）

Question

我正在尝试使用folium中的CircleMarker来基于数据帧映射点。标记的弹出部分出现问题。我得到了错误的坐标重叠弹出窗口。有办法解决这个问题吗？正如你们在照片中看到的，无论我点击哪个圆圈，我得到的弹出窗口都是相同的值，而预期的弹出窗口应该根据“名称”而改变。我觉得弹出窗口不知怎么被覆盖了。我使用的代码如下所示：

def color_producer(perc):
    if perc < 5:
        return 'red'
    elif 5 <= perc < 20:
        return 'orange'
    elif 20 <= perc < 40:
        return 'yellow'
    else:
        return 'green'


map = folium.Map(location=[100,0], zoom_start=2)

 for lat,lon,name,perc in zip(df['lat'],df['long'],df['ix_name'],df['perc']):


        (folium.CircleMarker(location=[lat, lon],
                            radius = perc,
                            popup= name,
                            fill=True, # Set fill to True
                            fill_color=color_producer(perc),
                            color = color_producer(perc))).add_to(map)

我查看了生成的html源代码。它看起来很好与所有不同的名称弹出窗口。粘贴以下内容以供参考：

 var circle_marker_7491df9ab173464ab69203523757c828 = L.circleMarker(
                [19.03681, 73.01582],
                {"bubblingMouseEvents": true, "color": "green", "dashArray": null, "dashOffset": null, "fill": true, "fillColor": "green", "fillOpacity": 0.2, "fillRule": "evenodd", "lineCap": "round", "lineJoin": "round", "opacity": 1.0, "radius": 53.086419753086425, "stroke": true, "weight": 3}
            ).addTo(map_1ab3aa4a1c4748dcacb78d6a21b647be);


            circle_marker_7491df9ab173464ab69203523757c828.bindTooltip(
                `<div>
                     53.086419753086425
                 </div>`,
                {"sticky": true}
            );


        var popup_4123819b7b89443ba50eac288bcf3d3f = L.popup({"maxWidth": "100%"});


            var html_a0d12ff985d64ac0ac836d6a37a75452 = $(`<div id="html_a0d12ff985d64ac0ac836d6a37a75452" style="width: 100.0%; height: 100.0%;">DE-CIX Mumbai</div>`)[0];
            popup_4123819b7b89443ba50eac288bcf3d3f.setContent(html_a0d12ff985d64ac0ac836d6a37a75452);


        circle_marker_7491df9ab173464ab69203523757c828.bindPopup(popup_4123819b7b89443ba50eac288bcf3d3f)
        ;

var circle_marker_437f3afc648a4fd6983cde142a6b24c4 = L.circleMarker(
                [19.03681, 73.01582],
                {"bubblingMouseEvents": true, "color": "gray", "dashArray": null, "dashOffset": null, "fill": true, "fillColor": "gray", "fillOpacity": 0.2, "fillRule": "evenodd", "lineCap": "round", "lineJoin": "round", "opacity": 1.0, "radius": 39.50617283950617, "stroke": true, "weight": 3}
            ).addTo(map_1ab3aa4a1c4748dcacb78d6a21b647be);


            circle_marker_437f3afc648a4fd6983cde142a6b24c4.bindTooltip(
                `<div>
                     39.50617283950617
                 </div>`,
                {"sticky": true}
            );


        var popup_150a69ba701b4e46ba5fdb45699302d7 = L.popup({"maxWidth": "100%"});


            var html_8feba716a60e41c1adfeef7becb0af51 = $(`<div id="html_8feba716a60e41c1adfeef7becb0af51" style="width: 100.0%; height: 100.0%;">Extreme IX Mumbai</div>`)[0];
            popup_150a69ba701b4e46ba5fdb45699302d7.setContent(html_8feba716a60e41c1adfeef7becb0af51);


        circle_marker_437f3afc648a4fd6983cde142a6b24c4.bindPopup(popup_150a69ba701b4e46ba5fdb45699302d7)
        ;

var circle_marker_68ff85d3457b43d3b493952dcc6d092c = L.circleMarker(
                [19.03681, 73.01582],
                {"bubblingMouseEvents": true, "color": "gray", "dashArray": null, "dashOffset": null, "fill": true, "fillColor": "gray", "fillOpacity": 0.2, "fillRule": "evenodd", "lineCap": "round", "lineJoin": "round", "opacity": 1.0, "radius": 32.098765432098766, "stroke": true, "weight": 3}
            ).addTo(map_1ab3aa4a1c4748dcacb78d6a21b647be);


            circle_marker_68ff85d3457b43d3b493952dcc6d092c.bindTooltip(
                `<div>
                     32.098765432098766
                 </div>`,
                {"sticky": true}
            );


        var popup_cd2406fa5fa94ea98aab5bef6679cba3 = L.popup({"maxWidth": "100%"});


            var html_944ab6bbac7b4cc7bdd2e5fb0d8c8c53 = $(`<div id="html_944ab6bbac7b4cc7bdd2e5fb0d8c8c53" style="width: 100.0%; height: 100.0%;">NIXI Mumbai</div>`)[0];
            popup_cd2406fa5fa94ea98aab5bef6679cba3.setContent(html_944ab6bbac7b4cc7bdd2e5fb0d8c8c53);


        circle_marker_68ff85d3457b43d3b493952dcc6d092c.bindPopup(popup_cd2406fa5fa94ea98aab5bef6679cba3)
        ;

我不太擅长html。弹出窗口是否可能由于处于相同的lat/long而无法呈现

Answer 1

弹出窗口隐藏在下面，如果单击弹出窗口的十字标记，可以看到它们