QT通过QWebChannel模块实现与HTML通信（web端），获取高德地图中某个点位的经纬度坐标。

基于我个人的上一篇内容，通过调用高德API创建了地图，链接如下。“QT6 调用高德地图API创建地图（初学者级）”

        本篇根据上一篇所实现的内容基础上，使用QT中的webchannel方法实现与HTML交互，在HTML中使用了Javascript代码实现。实现鼠标左键点击某个位置即可获得该地点的经纬度坐标，效果如下：

1.项目结构如下：

        .pro文件和main.cpp文件除了在.pro文件中加入几个模块以外，没有其他改动，因此直接放入代码

240505.pro

QT       += core gui webenginewidgets webenginecore webchannelgreaterThan(QT_MAJOR_VERSION, 4): QT += widgetsCONFIG += c++17# You can make your code fail to compile if it uses deprecated APIs.# In order to do so, uncomment the following line.#DEFINES += QT_DISABLE_DEPRECATED_BEFORE=0x060000    # disables all the APIs deprecated before Qt 6.0.0SOURCES += \    main.cpp \    maplistener.cpp \    widget.cppHEADERS += \    maplistener.h \    widget.hFORMS += \    widget.ui# Default rules for deployment.qnx: target.path = /tmp/$${TARGET}/binelse: unix:!android: target.path = /opt/$${TARGET}/bin!isEmpty(target.path): INSTALLS += target

main.cpp

#include "widget.h"#include int main(int argc, char *argv[]){    QApplication a(argc, argv);    Widget w;    w.show();    return a.exec();}

2.创建一个c++的类，用于实现QT和HTML中的通信。代码如下

maplistener.h

#ifndef MAPLISTENER_H#define MAPLISTENER_H#include#include class MapListener : public QObject{    Q_OBJECTpublic:    explicit MapListener(QObject *parent = nullptr);signals:    void positionUpdated(const QString &position); // 声明一个信号public slots:    void updatePosition(const QString &position) {        // 在这里处理接收到的经纬度数据        qDebug() page());    channel->registerObject(QStringLiteral("maplistener"), maplistener);

        下面是在html中javascript调用的方法。

channel.objects.maplistener.updatePosition(lnglat);  

widget.cpp

#include "widget.h"#include "ui_widget.h"#include #include #include #include"maplistener.h"Widget::Widget(QWidget *parent)    : QWidget(parent)    , ui(new Ui::Widget){    ui->setupUi(this);    ui->web_widget->setUrl(QUrl("http://localhost:8000/获取经纬度坐标(实验).html"));    MapListener *maplistener = new MapListener(this);    QWebChannel *channel = new QWebChannel(ui->web_widget->page());    channel->registerObject(QStringLiteral("maplistener"), maplistener);    ui->web_widget->page()->setWebChannel(channel);    connect(maplistener,&MapListener::positionUpdated,this,&Widget::onPositionUpdated);}Widget::~Widget(){    delete ui;}void Widget::onPositionUpdated(const QString &position){    // 使用逗号作为分隔符来分割字符串    QStringList parts = position.split(",");    // 检查是否至少有两个部分    if (parts.size() >= 2) {        // 移除可能的空格或换行符，并转换为浮点数（如果需要的话）        QString part1 = parts[0].trimmed();        QString part2 = parts[1].trimmed();        // 将分割后的部分设置到对应的QTextEdit中        ui->textEdit1->setText(part1);        ui->textEdit2->setText(part2);    } else {        // 如果字符串没有按预期分割，可以设置一些默认值或显示错误信息        ui->textEdit1->setText("Invalid position (part 1)");        ui->textEdit2->setText("Invalid position (part 2)");    }}

widget.h

#ifndef WIDGET_H#define WIDGET_H#include #include #include QT_BEGIN_NAMESPACEnamespace Ui {class Widget;}QT_END_NAMESPACEclass Widget : public QWidget{    Q_OBJECTpublic:    Widget(QWidget *parent = nullptr);    ~Widget();private:    Ui::Widget *ui;private slots:    void onPositionUpdated(const QString &position); // 声明一个槽来更新 QTextEdit};#endif // WIDGET_H

4.编写HTML文件以及其中的Javascript代码

        在这个部分需要用到qwbchannel.js文件，这个文件直接从自己安装目录下面的“QT.6\Examples\Qt-6.5.3\webchannel\shared”这个文件夹下获得即可，记得这个js文件要跟html放在同一个位置，不然找不到好像。不是很懂，希望有大哥解答一下！

获取经纬度坐标（实验）.html

                鼠标拾取地图坐标            html,body{        width: 100%;        height: 100%;        margin: 0px;    }    .map{        height: 100%;        width: 100%;        float: left;    }        new QWebChannel(qt.webChannelTransport, function (channel) {            // 为地图注册click事件获取鼠标点击出的经纬度坐标          var map = new AMap.Map("container", {              mapStyle: "amap://styles/blue",resizeEnable: true          });          map.on('click', function(e) {              var lnglat = e.lnglat.getLng() + ',' + e.lnglat.getLat();              // 假设你在 Qt 端注册了一个名为 'mapListener' 的对象，并且它有一个 'updatePosition' 方法              channel.objects.maplistener.updatePosition(lnglat);          });      });