Folium标记点击功能报错：Uncaught ReferenceError: removeOtherMarkers未定义

核心错误原因 #

出现Uncaught ReferenceError: removeOtherMarkers is not defined主要源于两个关键问题：

1. IFrame沙箱隔离：folium的Popup通过IFrame承载内容，默认沙箱设置会隔离iframe与父页面的JavaScript作用域，导致父页面注入的removeOtherMarkers函数无法被iframe内的按钮调用。
2. 参数传递错误：按钮onclick中的m是Python端的folium.Map对象，并非前端Leaflet地图实例；this指向的是按钮元素，不是点击的标记本身，函数无法获取目标标记的有效信息。

排查方向 #

• 检查IFrame的sandbox属性是否允许跨脚本访问
• 确认JavaScript函数的作用域是否能被按钮所在的iframe覆盖
• 验证前端地图实例和标记的引用逻辑是否正确

具体解决方案 #

1. 修正IFrame沙箱设置 #

允许iframe访问父页面的脚本和同源内容，修改sandbox属性：

iframe.sandbox = "allow-scripts allow-same-origin"

2. 调整JavaScript函数的注入位置 #

将removeOtherMarkers函数直接嵌入到popup的HTML中，确保iframe内可直接访问：

html = f"""
<div style="text-align: center;">
    <b>{city_name}:</b><br>
    <span>{info}</span><br>
    <button style="margin-right: 10px; padding: 5px 15px; cursor: pointer;" onclick='removeOtherMarkers("{location[0]}", "{location[1]}")'>Detail</button>
    <button style="margin-top: 10px; padding: 5px 15px; cursor: pointer;" onclick='selectMarker()'>Select</button>
</div>
<script>
function removeOtherMarkers(targetLat, targetLng) {{
    // 获取前端Leaflet地图实例（folium默认生成全局实例为map）
    var map = window.map;
    var allMarkers = map._layers;
    targetLat = parseFloat(targetLat);
    targetLng = parseFloat(targetLng);

    for (var markerId in allMarkers) {{
        var marker = allMarkers[markerId];
        if (marker instanceof L.Marker) {{
            var markerLat = marker._latlng.lat;
            var markerLng = marker._latlng.lng;

            // 用精度判断避免浮点坐标比较误差
            if (Math.abs(markerLat - targetLat) > 1e-6 || Math.abs(markerLng - targetLng) > 1e-6) {{
                map.removeLayer(marker);
            }}
        }}
    }}
}}
function selectMarker() {{
    // 补充Select按钮的业务逻辑
}}
</script>
"""

3. 修正标记引用逻辑 #

直接将当前标记的坐标作为参数传递给函数，避免依赖标记实例的跨作用域引用，同时通过浮点精度判断解决坐标比较的误差问题。

4. 确保地图实例的正确引用 #

如果folium生成的地图没有全局map变量，可在创建地图时指定ID，再通过ID获取实例：

m = folium.Map(
    id='my-custom-map',
    title='map',
    zoom_start=8,
    location=coordinate,
    width='100%',
    height='100%'
)

然后在JS函数中修改获取逻辑：

var map = L.DomUtil.get('my-custom-map')._map;

额外注意事项 #

• 移除原有的m.get_root().html.add_child(folium.Element(js_definition))代码，避免重复定义和作用域冲突
• 修正popup.split(": ")的换行符处理，建议改为split(":\n")或使用明确的分隔符
• PyQt环境中需确保WebEngineView允许JavaScript执行（默认允许，特殊配置需检查）

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