社区微信群开通啦,扫一扫抢先加入社区官方微信群
社区微信群
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()<<lon<<lat; //获取鼠标点击位置的地图坐标,显示
}
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()<<filePath;
m_view->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行 <script src="qwebchannel.js"></script> ,不可缺少。
百度地图JavaScript API2.0 参考http://lbsyun.baidu.com/index.php?title=jspopular 。
—end。
JS与C++函数可以相互调用了,关于数据交互的部分用QT的 signals/slot机制就很容易实现了。
这里只放了关键部分的代码片段,完整QT程序和html / JS程序打包了,见评论区,QT5.9.3可以直接编译运行。
如果觉得我的文章对您有用,请随意打赏。你的支持将鼓励我继续创作!