folium中报js: Uncaught ReferenceError: L is not defined
时间: 2025-06-04 10:20:48 浏览: 21
### Folium中因L未定义导致的Uncaught ReferenceError错误解决方案
在使用Folium进行地理数据可视化时,如果出现`Uncaught ReferenceError: L is not defined`错误,通常是因为Folium地图的渲染依赖于Leaflet.js库,而该库未能正确加载或初始化。以下是可能的原因及解决方案[^1]。
#### 1. 确保Folium版本正确
Folium的某些旧版本可能存在与Leaflet.js不兼容的问题。建议升级到最新版本以确保兼容性:
```bash
pip install --upgrade folium
```
通过升级Folium,可以避免因版本问题导致的Leaflet.js加载失败[^1]。
#### 2. 检查HTML文件中的Leaflet.js加载
Folium生成的地图HTML文件中会自动包含Leaflet.js和相关CSS的链接。如果这些资源无法正确加载,可能会导致`L is not defined`错误。可以通过以下方式验证:
- 打开生成的HTML文件,检查`<head>`部分是否包含类似以下内容:
```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/leaflet.css" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/leaflet.js"></script>
```
如果没有正确加载,可能是网络问题或CDN地址不可用。可以尝试更换CDN地址或将Leaflet.js本地化[^2]。
#### 3. Streamlit-Folium集成时的注意事项
在Streamlit应用中使用Folium时,推荐使用`streamlit_folium`库来渲染地图。如果直接嵌入Folium地图可能导致Leaflet.js未正确加载。例如:
```python
import streamlit as st
import folium
from streamlit_folium import st_folium
m = folium.Map(location=[51.5074, -0.1278], zoom_start=10)
st_folium(m, width=700)
```
通过`streamlit_folium`库,可以确保Leaflet.js及相关资源正确加载。
#### 4. Flask应用中的解决方法
在Flask应用中嵌入Folium地图时,确保生成的HTML文件能够正确加载Leaflet.js。例如:
```python
from flask import Flask, render_template
import folium
app = Flask(__name__)
@app.route('/')
def map_view():
m = folium.Map(location=[51.5074, -0.1278], zoom_start=10)
map_html = "templates/map.html"
m.save(map_html)
return render_template("map.html")
if __name__ == '__main__':
app.run(debug=True)
```
确保`templates/map.html`文件能够被浏览器正确访问,并且包含所有必要的Leaflet.js和CSS链接。
#### 5. 自定义标记样式时的注意点
在使用自定义标记(如`CircleMarker`)时,也需要确保Leaflet.js已正确加载。例如:
```python
import folium
import pandas as pd
df = pd.DataFrame({
'City': ['London', 'Paris'],
'Latitude': [51.5074, 48.8566],
'Longitude': [-0.1278, 2.3522]
})
m = folium.Map(location=[51.5074, -0.1278], zoom_start=5)
for idx, row in df.iterrows():
folium.CircleMarker(
location=[row['Latitude'], row['Longitude']],
radius=8,
popup=row['City'],
color='green',
fill=True,
fill_color='green',
fill_opacity=0.6
).add_to(m)
m.save('map.html')
```
上述代码生成的地图HTML文件中应包含正确的Leaflet.js加载路径[^3]。
### 注意事项
如果以上方法仍未解决问题,可以尝试手动下载Leaflet.js和CSS文件并将其放置在项目目录中,修改HTML文件以引用本地资源。
阅读全文
相关推荐

















