添加Leaflet-Ruler插件失败：出现Uncaught ReferenceError: map is not defined错误

错误原因 #

Uncaught ReferenceError: map is not defined 的核心问题是：你在自定义JS代码中直接使用全局变量map，但Folium生成的Leaflet地图实例并非以此命名，JS无法找到对应的地图对象。

解决办法 #

1. 使用Folium地图的正确变量名 #

Folium的地图对象m提供了get_name()方法，该方法会返回地图实例在JS中的真实变量名（格式通常为map_xxxxxx）。将自定义JS中的map替换为这个变量名即可。

2. 移除重复的Leaflet基础库引入 #

Folium默认已经加载了Leaflet的核心CSS和JS文件，重复引入会导致版本冲突或冗余加载，建议移除这部分代码。

修正后的完整代码 #

# 加载leaflet-ruler的样式和脚本
m.get_root().header.add_child(folium.CssLink("https://cdn.rawgit.com/gokertanrisever/leaflet-ruler/master/src/leaflet-ruler.css"))
m.get_root().html.add_child(folium.JavascriptLink("https://cdn.rawgit.com/gokertanrisever/leaflet-ruler/master/src/leaflet-ruler.js"))

# 使用Folium地图的正确变量名初始化标尺控件
my_js = f'''
L.control.ruler().addTo({m.get_name()});
'''
m.get_root().script.add_child(folium.Element(my_js))

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