PyQt5与Html的关于地图位置显示的动态交互

---

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的地图动态交互的实现，简单做个记录！