Qt实现在线地图之Qt与js之间的交互

转发一份，博主在今日头条上写的一篇文章，在今日头条app可以搜“十启树”，也可以搜到本博主。为什么要把这篇文章放这里，一是使用知识点更全一些；二是上几篇写的就是与之相关的（有关地图的），同时也希望大家同时关注博主今日头条主页。谢谢。

１，首先准备环境。安装vs2015 好，再装上Qt5.9.4开发环境。不知道装的同学可以百度（一大堆），在这里我们就不浪费时间讲了。

第一步：建基于Qt5.9.4 带GUI界面工程。

工程如下：

第二步：添加本程所需要的Qt库

第三步：准备QWebEngineView 需要加载的 html 文件。

（1）在这里，需要做的最重要的一件事，就是注册百度地图开的API key（注：这个key比较重要，不要透露给别人） ,注册是免费的。只是有些专业功能是需要收费的，我们基本是用不到的。

（2）还要准备实现qt 与js数据交互的桥梁文件 qwebchannel.js 。这个文件在Qt安装目录就可以找到。

（3）在html 页面中编写初始化百度地图

第四步：Qt工程下编写调用html文件相关代码

1，创建通道对象类（qt与web通信是通过对象的方式交换数据）

创建类TinteractObj：

class TInteractObj : public QObject

{

Q_OBJECT

public:

TInteractObj(QObject *parent);

~TInteractObj();

//页面端调用QT公共接口，必须有Q_INVOKABLE

//页面端调用QT变量，用Q_PROPERTY，用法与QML相同

Q_INVOKABLE void JSSendMessage(QString strParameter,QString str);

Q_PROPERTY(QString username READ username WRITE setusername NOTIFY sig_nameChanged)

Q_PROPERTY(QString password READ password WRITE setpassword NOTIFY sig_passwdChanged)

QString m_username;

QString m_password;

QString username(){

return m_username;

}

QString password(){

return m_password;

}

void setusername(QString str){

m_username = str;

}

void setpassword(QString str){

m_password = str;

}

signals:

void sig_nameChanged();

void sig_passwdChanged();

void SigReceivedMessFromJS(QString strParameter,QString str); //Receive message from Web

void SigSendMessageToJS(QString strParameter); //Send message to Web



};

#endif



tinteractobj.cpp

#include "tinteractobj.h"

TInteractObj::TInteractObj(QObject *parent)

:QObject(parent)

{

}

TInteractObj::~TInteractObj()

{

}

void TInteractObj::JSSendMessage(QString strParameter,QString str)

{

emit SigReceivedMessFromJS(strParameter,str);

}

2,调用ｈｔｍｌ工程代码

头文件

cpp文件

运行效果

工程看起来很简单，在实际工作中可能会遇到各种问题或者自己来重新弄一遍这个工跑第一也会出现很多问题。

注意：1多理解 下面的js函数与qt 中的对应的函数

2，当程序编译好，准备发布时需要带下如下的动态库，红框是特别需要注意的地方，少了他们程序可以运行，但页面显示不出来（在自己电脑可以显示，安装到别人电脑就不显示了）。其他的dll库，如果少了，程序会明显的报出来少哪些。这几个就不行了。

        当然这只是打通Qt 与JS 交互的基本功能。大家可以根据自己需要扩充。需要demo的留言，以后会陆续讲qt 实现离线地图，qgis编写地图。注：因为是２１年写的，ｑｔ　5.9.4 版本，如果版本进行了升级，可能有点不同，不过大的方法就是这样。