DeepSeek代码之旅2:卫星地图标记方法之——Pyside6实现

现在写代码，开始习惯把DeepSeek当作字典工具了，对于自己陌生的地方，问一问它，它均会给出详细的答案，包括使用方法方案，这以后的程序员真要得加油了！普通程序员危机重重了！不多说了，那个行业都要多学习，不学习迟早就要下岗了！之前我使用html实现了地图标记功能，现在我使用Pyside6去实现图形化界面功能。完整代码可以查看文末。

主要实现的方法：Pyside6的QWebEngineView加载HTML文件访问地图，QWebEngineView与JavaScript双向通信实现获取坐标值、添加标记、删除标记、加载标记等功能。

技术难点：

1、监听点击事件并回传坐标

在 HTML 中，通过高德地图的 map.on('click', ...) 监听点击事件，并通过 window.pyObject 将坐标传递给 PySide6。

html文件中：

                // 监听地图点击事件
                map.on('click', (e) => {
                    const lng = e.lnglat.getLng();
                    const lat = e.lnglat.getLat();
                    // 调用 PySide6 暴露的方法
                    if (window.pyObject) {
                        window.pyObject.onMapClicked(lng, lat);
                    }
                });

py文件中：

       class Bridge(QObject):
    def __init__(self, parent=None):
        super().__init__(parent)
        self.map_window = parent

    @Slot(float, float)
    def onMapClicked(self, lng, lat):
        # 安全更新 UI
        QMetaObject.invokeMethod(
            self.map_window.input_lng, "setText",
            Qt.QueuedConnection, Q_ARG(str, str(lng))
        )
        QMetaObject.invokeMethod(
            self.map_window.input_lat, "setText",
            Qt.QueuedConnection, Q_ARG(str, str(lat))
        )
        print(f"坐标已接收: {lng}, {lat}")  # 控制台输出确认
#……其他程序模块
				# 配置 QWebChannel
        self.channel = QWebChannel()
        self.bridge = Bridge(self)
        self.channel.registerObject("pyObject", self.bridge)   #创建一个 QWebChannel 实例
        self.browser.page().setWebChannel(self.channel)
#……其他程序模块

通过上面两个函数，就会实现：

（1）点击地图获取坐标：用户点击地图时，JavaScript 会捕获经纬度并通过
window.pyObject.onMapClicked(lng, lat) 传递给 PySide6。

（2）自动填充输入框：PySide6 接收到坐标后，自动填充经度和纬度的输入框。

2、标记点操作

通过QWebEngineView绑定HTML之后，就可以对HTML中的JavaScript函数进行相应的操作，以添加标记为例

python代码部分：

    def add_marker(self):
        lng = self.input_lng.text()
        lat = self.input_lat.text()
        title = self.input_title.text()
        if lng and lat:
            js_code = f"addMarker({lng}, {lat}, '{title}')"
            self.browser.page().runJavaScript(js_code)

HTML代码部分：

        function addMarker(lng, lat, title) {
            // 获取当前页面的URL
            var currentURL = window.location.href;
            // 提取目录路径
            var directoryPath = currentURL.substring(0, currentURL.lastIndexOf('/') + 1);
            if (!map) return;
            const marker = new AMap.Marker({
                position: [lng, lat],
                map: map,
                icon: directoryPath + "towerdot.png" 
            }); 
            marker.setExtData({ title: title || "未命名标记" });
            marker.on('click', () => {
                    new AMap.InfoWindow({
                        content: `<strong>${title}</strong><br>经纬度:${lng},${lat}`
                    }).open(map, marker.getPosition());
                });
            markers.push(marker);           
        }

从html中我们看出，添加标记点之后通过icon显示自己的图标（当前目录下towerdot.png这个图表），也可以使用官方的地址为"
https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png"。其他标签操作类似。

代码地址：
https://gitee.com/tangzonghuan/map-tool.git