QT5.9 利用 QWebEngineView / QWebChannel 调用JavaScript 实现QT与HTML网页数据交互, 实现QT加载百度地图并与地图交互数据

QT5.9 利用 QWebEngineView / QWebChannel 调用JavaScript 实现QT与HTML网页数据交互, 实现QT加载百度地图并与地图交互数据

编译环境 QT5.9.3 + VS2015 64/32bit +win10 (MinGW默认不支持 QWebEngineView)

先看软件截图:
QT5.9 利用 QWebEngineView / QWebChannel 调用JavaScript 实现QT与HTML网页数据交互, 实现QT加载百度地图并与地图交互数据_第1张图片

实现功能:
1.QT通过QWebEngineView模块加载百度地图,通过QWebChannel 调用JS函数实现与地图数据交互。
2.点击pushButton按钮QT会调用JS函数在地图页做标注,将上面两个输入框输入的经纬度坐标传给网页(c++调用JS)。
3.鼠标点击地图页后会提示点的坐标信息,并回传给QT,通过qDebug()显示(JS调用C++)。
QT程序用到文件
QT5.9 利用 QWebEngineView / QWebChannel 调用JavaScript 实现QT与HTML网页数据交互, 实现QT加载百度地图并与地图交互数据_第2张图片

bridge.h文件 : -》创建对象供JS调用,JS函数直接调用bridge文件中的函数


class bridge : QObject
{
Q_OBJECT
public:
    bridge();
signals:
    void sigYourName(const QString &name);
public slots:
    void getYourName();
    void getCoordinate(QString lon,QString lat);
};

bridge.cpp文件::

void bridge::getCoordinate(QString lon, QString lat)
{
    qDebug()<

mainwindow.h 主界面文件::


class MainWindow : public QMainWindow
{
    Q_OBJECT
public:
    QWebEngineView *m_view;  	//用于加载HTML文件,加载百度地图
    QWebChannel *channel; 	//通过QWebChannel实现数据交互
public:
    explicit MainWindow(QWidget *parent = 0);
    ~MainWindow();
private slots:
    void on_pushButton_clicked();
private:
    Ui::MainWindow *ui;
};

mainwind.cpp 文件::

m_view=new QWebEngineView(this);
    setCentralWidget(m_view);
    channel = new QWebChannel(this);   //创建通道对象用于与JS交互
    bridge *mybride=new bridge();        //创建通道对象用于与JS交互
    channel->registerObject("bridge_name",(QObject*)mybride);  //注册对象,
    // 这里注册对象名"bridge_name"需要与JS函数用到的名称一致
    //见baidumap.html文件第94行 window.bridge_js = channel.objects.bridge_name;
    // C++对象"bridge_name", JS对象bridge_js。101行,JS调用QT中C++函数只需
    //  bridge_js.getCoordinate(e.point.lng, e.point.lat);网页向QT传递经纬度坐标
    //这就实现了JS调用C++函数,实现网页向QT传递数据
    m_view->page()->setWebChannel(channel);
    QDir temDir("../baidumap.html"); 
    QString absDir = temDir.absolutePath();
    QString filePath = "file:///" + absDir;  qDebug()<page()->load(QUrl(filePath));//这里加载百度地图文件 baidumap.html  

PushButton的SLOT函数:

QString cmd=QString("addmarker(%0,%1)")
            .arg(ui->spinlong->value())
            .arg(ui->spinlat->value());
    //把要调用的JS命令当做QString传递给网页
    //对应baidumap.html 第77行
    //这就实现了QT通过C++调用JS函数,QT向网页传递数据
m_view->page()->runJavaScript(cmd);

所用HTML/JS文件:
在这里插入图片描述

之前没学过js,只用到了一些很简单的语法,所用到的全部JS函数都在baidumap.html中,需要在网页上实现其它功能的话也是加到这个文件中。
qwebchannel.js : QT官方给的程序,JS应该是通过这个程序识别QT中的程序,调用就好,不需要编辑,见
https://doc.qt.io/qt-5.9/qtwebengine-webenginewidgets-markdowneditor-resources-qwebchannel-js.html
baidumap.html::根据百度地图 API2.0 写的网页文件,实现加载地图、添加地图控件、添加标注、GPS坐标与BD09坐标转换、C++/JS交互功能。
17行 ,不可缺少。
百度地图JavaScript API2.0 参考http://lbsyun.baidu.com/index.php?title=jspopular 。
—end。
JS与C++函数可以相互调用了,关于数据交互的部分用QT的 signals/slot机制就很容易实现了。
这里只放了关键部分的代码片段,完整QT程序和html / JS程序打包了,见评论区,QT5.9.3可以直接编译运行。

你可能感兴趣的:(QT相关)