QWebEngineView加载folium生成HTML报Uncaught ReferenceError: L未定义

问题根源 #

folium生成的地图HTML默认依赖CDN加载Leaflet框架（L是Leaflet的全局对象），但QWebEngineView可能因网络策略限制、资源加载时序问题或CSP（内容安全策略）配置，导致Leaflet的JS文件未成功加载，进而触发该错误。

可行解决方案 #

1. 强制使用本地Leaflet资源 #

folium支持直接生成依赖本地资源的HTML，无需依赖外部CDN：

import folium

# 创建地图实例
map_obj = folium.Map(location=[45.523, -122.675], zoom_start=13)
# 保存时指定local_resources=True，自动使用folium内置的本地Leaflet资源
map_obj.save('local_map.html', local_resources=True)

之后用QWebEngineView加载生成的local_map.html即可，路径需用QUrl.fromLocalFile()确保本地文件加载：

from PySide6.QtWebEngineWidgets import QWebEngineView
from PySide6.QtCore import QUrl

web_view = QWebEngineView()
# 替换为你的本地HTML文件绝对路径
web_view.load(QUrl.fromLocalFile("/path/to/local_map.html"))
web_view.show()

2. 手动替换CDN链接为本地资源 #

如果上述方法无效，可手动下载Leaflet资源并修改HTML：

• 下载folium对应版本的Leaflet资源（folium 0.16.0默认使用Leaflet 1.9.4），包括leaflet.js、leaflet.css和图标文件。
• 打开folium生成的HTML，将CDN链接替换为本地路径：

  <!-- 原CDN链接 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.css"/>
  <script src="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.js"></script>
  
  <!-- 替换为本地路径 -->
  <link rel="stylesheet" href="./leaflet/leaflet.css"/>
  <script src="./leaflet/leaflet.js"></script>
  

• 确保本地资源与HTML文件的相对路径正确，或使用绝对路径。

3. 调整QWebEngineView的网络与JS配置 #

确保QWebEngineView允许加载外部资源并启用JavaScript：

from PySide6.QtWebEngineWidgets import QWebEngineView
from PySide6.QtWebEngineCore import QWebEngineSettings

web_view = QWebEngineView()
settings = web_view.settings()
# 显式启用JavaScript
settings.setAttribute(QWebEngineSettings.JavascriptEnabled, True)
# 允许加载外部图片和样式
settings.setAttribute(QWebEngineSettings.AutoLoadImages, True)
settings.setAttribute(QWebEngineSettings.AllowRunningInsecureContent, True)
# 宽松的CSP配置，允许CDN资源加载
settings.setContentSecurityPolicy(
    "default-src 'self' https://cdn.jsdelivr.net; "
    "script-src 'self' https://cdn.jsdelivr.net 'unsafe-inline'; "
    "style-src 'self' https://cdn.jsdelivr.net 'unsafe-inline'"
)

4. 延迟地图初始化逻辑 #

修改HTML中的地图脚本，确保Leaflet加载完成后再执行初始化：

<script>
// 原代码可能直接执行，改为等待DOM和资源加载完成
document.addEventListener('DOMContentLoaded', function() {
    var map = L.map('map').setView([45.523, -122.675], 13);
    // 其余地图图层、标记等初始化代码
});
</script>

验证步骤 #

1. 修改后的HTML先在本地浏览器打开，确认地图正常显示。
2. 使用QWebEngineView加载时，通过QWebEnginePage的consoleMessage信号捕获控制台日志，排查是否还有其他加载错误：

def on_console_message(level, message, line, source):
    print(f"Console [{level}]: {message} (Line {line}, {source})")

web_view.page().consoleMessage.connect(on_console_message)

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