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）

先看软件截图：

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

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可以直接编译运行。