如何解决Folium 地图与 PySide2 QWebEngineView 一起使用时，不显示底图
概述：我有一个使用 pyside2/PyQt5 和 QWebEngineView 构建的 GUI，我能够显示 folium 生成的地图，保存到 html，然后显示在 QWebEngineView 小部件中。
如果我选择不同的源作为底图，例如 MapBox，它工作正常。此外，如果我在普通 Web 浏览器中打开 folium 生成的 html，它会正确显示底图。
我的尝试：我昨天更新了 pyside2 和 folium，但它没有影响或改变结果。
这里有一些示例代码供您自己尝试。我已将 html 作为文本包含在内，但没有办法真正简化那么多，所以很抱歉文本太多。
import os
import sys
from pyside2.QtCore import QUrl
from pyside2.QtWidgets import QApplication,QLineEdit,QMainWindow,qtoolbar
from pyside2.QtWebEngineWidgets import QWebEngineView
placeholder_html = r"""<!DOCTYPE html>
<head>
<Meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script>
L_NO_TOUCH = false;
L_disABLE_3D = false;
</script>
<script src="https://cdn.jsdelivr.net/npm/leaflet@1.5.1/dist/leaflet.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.5.1/dist/leaflet.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.css"/>
<link rel="stylesheet" href="https://rawcdn.githack.com/python-visualization/folium/master/folium/templates/leaflet.awesome.rotate.css"/>
<style>html,body {width: 100%;height: 100%;margin: 0;padding: 0;}</style>
<style>#map {position:absolute;top:0;bottom:0;right:0;left:0;}</style>
<Meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<style>
#map_305dcca754af4fd68c9ec8c6f4d22187 {
position: relative;
width: 100.0%;
height: 100.0%;
left: 0.0%;
top: 0.0%;
}
</style>
<script src="https://rawcdn.githack.com/ljagis/leaflet-measure/2.1.7/dist/leaflet-measure.js"></script>
<link rel="stylesheet" href="https://rawcdn.githack.com/ljagis/leaflet-measure/2.1.7/dist/leaflet-measure.css"/>
</head>
<body>
<div class="folium-map" id="map_305dcca754af4fd68c9ec8c6f4d22187" ></div>
</body>
<script>
var map_305dcca754af4fd68c9ec8c6f4d22187 = L.map(
"map_305dcca754af4fd68c9ec8c6f4d22187",{
center: [37.97388131,-122.0443919],crs: L.CRS.epsg3857,zoom: 12,zoomControl: true,preferCanvas: false,}
);
var tile_layer_a14f036f31594845b89380be31bb09fd = L.tileLayer(
"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",{"attribution": "Data by \u0026copy; \u003ca href=\"http://openstreetmap.org\"\u003eOpenStreetMap\u003c/a\u003e,under \u003ca href=\"http://www.openstreetmap.org/copyright\"\u003eODbL\u003c/a\u003e.","detectRetina": false,"maxNativeZoom": 18,"maxZoom": 18,"minZoom": 0,"Nowrap": false,"opacity": 1,"subdomains": "abc","tms": false}
).addTo(map_305dcca754af4fd68c9ec8c6f4d22187);
var feature_group_093f66692993484ba636a59ef8052169 = L.featureGroup(
{}
).addTo(map_305dcca754af4fd68c9ec8c6f4d22187);
var marker_dd85fc86d67445dfb4f4c435187f91e0 = L.marker(
[37.97388131,{}
).addTo(feature_group_093f66692993484ba636a59ef8052169);
marker_dd85fc86d67445dfb4f4c435187f91e0.setIcon(custom_icon_1ef21e7003ac401183c880dcbdb0e61c);
var popup_98cc02d3036844c097ff39167bd52667 = L.popup({"maxWidth": "100%"});
var html_a1239c595b2e4c07a7035181d7dce41a = $(`<div id="html_a1239c595b2e4c07a7035181d7dce41a" style="width: 100.0%; height: 100.0%;">WW-01</div>`)[0];
popup_98cc02d3036844c097ff39167bd52667.setContent(html_a1239c595b2e4c07a7035181d7dce41a);
marker_dd85fc86d67445dfb4f4c435187f91e0.bindPopup(popup_98cc02d3036844c097ff39167bd52667)
;
var measure_control_757d1e5bfbe34cfb8f6e311097138e29 = new L.Control.Measure(
{"position": "topright","primaryAreaUnit": "sqmeters","primaryLengthUnit": "meters","secondaryAreaUnit": "acres","secondaryLengthUnit": "miles"});
map_305dcca754af4fd68c9ec8c6f4d22187.addControl(measure_control_757d1e5bfbe34cfb8f6e311097138e29);
var layer_control_38ec13a480454bf98e94d88f44f11118 = {
base_layers : {
"openstreetmap" : tile_layer_a14f036f31594845b89380be31bb09fd,},overlays : {
"WW-01" : feature_group_093f66692993484ba636a59ef8052169,};
L.control.layers(
layer_control_38ec13a480454bf98e94d88f44f11118.base_layers,layer_control_38ec13a480454bf98e94d88f44f11118.overlays,{"autoZIndex": true,"collapsed": true,"position": "topright"}
).addTo(map_305dcca754af4fd68c9ec8c6f4d22187);
</script>"""
with open('placeholder.html','w') as f:
f.write(placeholder_html)
class browser(QMainWindow):
def __init__(self):
super(browser,self).__init__()
current_path = os.getcwd()
filepath = '%s%s' % (current_path,'\\placeholder.html')
filepath = filepath.replace('\\','/')
url = r'file:///' + filepath
self.toolbar = qtoolbar()
self.addToolBar(self.toolbar)
self.address = QLineEdit()
self.address.setText(url)
self.address.returnpressed.connect(self.load)
self.toolbar.addWidget(self.address)
self.view = QWebEngineView()
self.view.load(QUrl(url))
self.view.page().urlChanged.connect(self.url_changed)
self.setCentralWidget(self.view)
def load(self):
url = QUrl.fromUserInput(self.address.text())
if url.isValid():
self.view.load(url)
def url_changed(self,url):
self.address.setText(url.toString())
app = QApplication(sys.argv)
main_window = browser()
main_window.show()
sys.exit(app.exec_())
也许我只需要更新一些我没有想到的东西，或者 OpenStreetMap 不再工作了。在此期间，我会尝试其他一些事情，但如果有人能发现我可能出错的地方，或者如果他们知道我正在使用的这些软件包之一发生了变化，我们将非常感谢您的帮助。谢谢！
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。