PyQt5与Html的关于地图位置显示的动态交互上篇本是放弃关于Folium的动态显示，但是通过尝试与查阅资料，发现能满

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文件，也就是setHtml，相当于设置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)

上面的函数是需要在HTML的script标签中进行编写对应的函数，HTML中的script标签用于定义客户端的脚本。

我们在这里编写与python对应的addPoint函数，接收经纬度信息，然后通过之前定义的mymap添加对应的经纬度。这里的函数名称需要与python中的函数名称保持一致，这样在python可以调用这个函数，往这个函数传输经纬坐标。

4 注意

在测试过程中发现，经纬度坐标可以传输过去，但是对应的控件中没有显示地图，原因是如果加载离线地图，那么如果添加的坐标不在离线地图范围内，那么地图是无法显示的，会出现空白上标注，不要怀疑是哪里写错了，可能就是地图不完整而已！

这个图上就可以看出的是地图没有加载完整！

---

总结

本文介绍了python中HTML的地图动态交互的实现，简单做个记录！