PyQt5与Html的关于地图位置显示的动态交互
- 1 前言
- 2 python部分
- 3 HTML代码
- 4 注意
- 总结
1 前言
上篇本是放弃关于Folium的动态显示,但是在仔细对比Folium在python的直接应用与Html中的写法,其实两者没有什么区别,都是基于Leaflet上建立区域,然后加载地图。这篇介绍一下python与Html的动态交互。
2 python部分
self.layout=QVBoxLayout()
self.map=QWebEngineView()
self.map.setHtml(self.html(), baseUrl=QUrl.fromLocalFile('.'))
self.layout.addWidget(self.map)
这里是建立一个层,然后定义QWebEngineView。
注意:QWebEngineView用于在应用程序中显示网页。QWebEngineView 类提供了一个完整的网页浏览器视图,允许开发者将网页内容嵌入到 Qt 应用程序中
。
将定义的QWebEngineView中放入对应的HTML文件。
上面这种是直接在python中写入HTML文件。下面的代码是我们直接读取HTML文件。两者没有特别的区别,HTML的内容都是一致的,可能第一种方式加载起来会更快,后一种加载是
self.map.load(QUrl.fromLocalFile("xxx.html"))
xx = f"addPoint({lat}, {lng});"
self.map.page().runJavaScript(xx)
这里的xx就是javascript的相关语句,通过相关语句runJavaScript用来在页面上下文中执行JavaScript代码的方法。
3 HTML代码
function addPoint(lat, lng) {
var latlng = new L.LatLng(lat, lng);
mymap.panTo(latlng)
上面的函数是需要在
4 注意
经纬度坐标可以传输过去,在测试过程中发现,没有显示地图,原因是如果加载离线地图,那么如果添加的坐标不在离线地图范围内,那么地图是无法显示的,会出现空白上标注,不要怀疑是哪里写错了,可能就是地图不完整而已!
总结
本文介绍了python中HTML的地图动态交互的实现,简单做个记录!