文章目录

• 前言
• 一、前期准备
• 二、HTML文件创建
• 三、实现步骤
• 四、示例完整代码
• 总结

前言

本文讲述了在Qt下使用QWebEngineView来加载HTML页面，实现该需求是需要连接网络的，这里进行了百度地图的嵌入显示，主要内容将结合相应的示例进行讲解，以便大家学习，如有错误之处，欢迎大家批评指正。

项目效果

提示：以下是本篇文章正文内容，下面案例可供参考

一、前期准备

下面是我的示例相关信息：

Qt构建环境：Qt5.14_MSVC2017_64bit 地图文件：baiduMap.html 交互工具：qwebchannel.js 

这里的构建环境使用的是MSVC编译器，这样才能使用qwebengineview，在项目的pro文件中需要添加下列代码：

QT += webenginewidgets   #只有用msvc编译器才能使用qwebengineview 

Qt与JS交互工具qwebchannel.js在Qt安装文件夹内直接找到，后面需要将地图文件和交互工具放到项目生成的exe同级目录下

二、HTML文件创建

这里与Qt进行交互的是百度地图API，并且要生成一个html类型的地图文件，
首先打开百度地图开放平台->进行注册登录->选择控制台->应用管理->我的应用->创建应用（如下图）->提交后获取应用AK(后面生成的HTML文件需要使用)

接下来可以在百度地图开放平台示例中心来生成地图文件，下面是我的示例的baiduMap.html文件内容，其中也有与Qt交互的代码介绍，注意其中的“您的AK密钥”要修改为上一步获取的应用AK哦

这里需要学习一下百度地图JavaScript API的使用，可以参考这篇文章：百度地图API基本使用（一）

三、实现步骤

下面引用内容来自这篇文章，创建工程的详细步骤也可以进行参考：Qt嵌入百度地图API的详细流程与常见问题

基本思路：
1.在界面中要创建网页容器QWebEngineView类，这是Qt提供的继承于QWidget类的一个窗口，使用时在.pro文件中要添加QT += webenginewidgets；
2.创建Qt与Html的连接通道QWebChannel,通过该通道可以实现主程序与网页之间的通信。当然，通道的建立是双方面的，即主程序和网页中都要进行相关操作；
3.通道建立完成即可实现主程序与网页之间的函数相互调用，并由此实现参数传递

这里是我的示例的初始化代码，其中的MyBridge类作为主程序和网页之间的"桥梁"，并通过信号与槽实现从网页接收数据：

void MainWindow::initWidget() {     //创建MyBridge对象用于与JS交互     m_bridge = new MyBridge();      //将单个对象注册到QWebChannel,注册名为bridge     QWebChannel *channel = new QWebChannel(this);     channel->registerObject(QString("bridge"),(QObject*)m_bridge);     ui->wg_map->page()->setWebChannel(channel);      //加载HTML文件     QString htmlPath = QCoreApplication::applicationDirPath() + "/baiduMap.html";     ui->wg_map->page()->load(QUrl(htmlPath));      //关联信号和槽函数     connect(m_bridge,&MyBridge::signal_showDate,this,&MainWindow::slot_showDate); } 

发送按钮槽函数中通过runJavaScript函数实现地图上指定经纬度的跳转：

void MainWindow::on_pb_send_clicked() {     //调用HTML的setPoint函数     QString cmd = QString("setPoint(%1,%2)").arg(ui->le_longitude->text()).arg(ui->le_latitude->text());     ui->wg_map->page()->runJavaScript(cmd); } 

四、示例完整代码

1.MyMap.pro

QT += core gui QT += webenginewidgets   #只有用msvc编译器才能使用qwebengineview  greaterThan(QT_MAJOR_VERSION, 4): QT += widgets  CONFIG += c++11  DEFINES += QT_DEPRECATED_WARNINGS  SOURCES += \     main.cpp \     mainwindow.cpp \     mybridge.cpp  HEADERS += \     mainwindow.h \     mybridge.h  FORMS += \     mainwindow.ui  # Default rules for deployment. qnx: target.path = /tmp/$${TARGET}/bin else: unix:!android: target.path = /opt/$${TARGET}/bin !isEmpty(target.path): INSTALLS += target 

2.mybridge.h

#ifndef MYBRIDGE_H #define MYBRIDGE_H  #include #include  class MyBridge : public QObject {    Q_OBJECT public:     MyBridge();  signals:     void signal_showDate(QString lng,QString lat);  public slots:     void getPoint(QString lng,QString lat);  }; #endif // MYBRIDGE_H 

3.mybridge.cpp

#include "mybridge.h"  MyBridge::MyBridge() {  }  void MyBridge::getPoint(QString lng,QString lat) {     emit signal_showDate(lng,lat); } 

4.mainwindow.h

#ifndef MAINWINDOW_H #define MAINWINDOW_H  #include  #include  #include  #include "mybridge.h"  QT_BEGIN_NAMESPACE namespace Ui { class MainWindow; } QT_END_NAMESPACE  class MainWindow : public QMainWindow {     Q_OBJECT  public:     MainWindow(QWidget *parent = nullptr);     ~MainWindow();      void initWidget();  private slots:     void slot_showDate(QString longitude,QString latitude);      void on_pb_send_clicked();  private:     Ui::MainWindow *ui;      MyBridge *m_bridge;  }; #endif // MAINWINDOW_H 

5.mainwindow.cpp

#include "mainwindow.h" #include "ui_mainwindow.h"  MainWindow::MainWindow(QWidget *parent)     : QMainWindow(parent)     , ui(new Ui::MainWindow) {     ui->setupUi(this);     this->initWidget(); }  MainWindow::~MainWindow() {     delete ui; }  void MainWindow::initWidget() {     //创建MyBridge对象用于与JS交互     m_bridge = new MyBridge();      //将单个对象注册到QWebChannel,注册名为bridge     QWebChannel *channel = new QWebChannel(this);     channel->registerObject(QString("bridge"),(QObject*)m_bridge);     ui->wg_map->page()->setWebChannel(channel);      //加载HTML文件     QString htmlPath = QCoreApplication::applicationDirPath() + "/baiduMap.html";     ui->wg_map->page()->load(QUrl(htmlPath));      //关联信号和槽函数     connect(m_bridge,&MyBridge::signal_showDate,this,&MainWindow::slot_showDate); }  void MainWindow::slot_showDate(QString longitude,QString latitude) {     ui->le_longitude->setText(longitude);     ui->le_latitude->setText(latitude); }  void MainWindow::on_pb_send_clicked() {     //调用HTML的setPoint函数     QString cmd = QString("setPoint(%1,%2)").arg(ui->le_longitude->text()).arg(ui->le_latitude->text());     ui->wg_map->page()->runJavaScript(cmd); } 

6.mainwindow.ui

总结

通过我的示例可以看到，这里实现百度地图的显示其实是QWebEngineView与javaScript的交互调用，所以也需要掌握基本的JS语法，以及一些基础的百度地图API的使用，后续也可以实现在地图上添加标注，画出轨迹等功能，这就需要我们不断的学习啦，一起加油！

hello：
共同学习，共同进步，如果还有相关问题，可在评论区留言进行讨论。

参考文章：
Qt嵌入百度地图API的详细流程与常见问题
QWebEngineView与javaScript交互调用百度离线地图