preface

When the qt5+MSVC environment is successfully built and baidu.html and qwebchannel.js are ready, we can start development. However, before that, you may need to learn QT5 knowledge. Here is the default. You will have some QT knowledge and JavaScript knowledge.

1, Project creation

First, create a qt project, which will not be repeated. After completion, as shown in the figure:

Put Baidu map.html and qwebchannel.js files in its root directory. As shown in the figure:
Note that in the previous document, your secret key should be copied and pasted as your own secret key.
Of course, JavaScript code can also be edited in QT. In the next communication operation between QT and JS, you need to write JS code in baidu.html.

2, Map display

1. Change of pro file

Add webengine widgets module, or add two documents. Right click to add project documents directly The contents of the pro file are shown in the figure. In fact, the line QT += core gui webenginewidgets has been modified.

QT       += core gui webenginewidgets

greaterThan(QT_MAJOR_VERSION, 4): QT += widgets

CONFIG += c++11

# The following define makes your compiler emit warnings if you use
# any Qt feature that has been marked deprecated (the exact warnings
# depend on your compiler). Please consult the documentation of the
# deprecated API in order to know how to port your code away from it.
DEFINES += QT_DEPRECATED_WARNINGS

# You can also make your code fail to compile if it uses deprecated APIs.
# In order to do so, uncomment the following line.
# You can also select to disable deprecated APIs only up to a certain version of Qt.
#DEFINES += QT_DISABLE_DEPRECATED_BEFORE=0x060000    # disables all the APIs deprecated before Qt 6.0.0

SOURCES += \
    main.cpp \
    mainwindow.cpp

HEADERS += \
    mainwindow.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. Load map display

Go straight to the code.
mainwindow.h file

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>
#include<QtWebEngineWidgets/QWebEngineView>
QT_BEGIN_NAMESPACE
namespace Ui { class MainWindow; }
QT_END_NAMESPACE

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    MainWindow(QWidget *parent = nullptr);
    ~MainWindow();
protected:
    void resizeEvent(QResizeEvent *event);
private:
    Ui::MainWindow *ui;
    QWebEngineView *map;
};
#endif // MAINWINDOW_H

mainwindow.cpp file.

#include "mainwindow.h"
#include "ui_mainwindow.h"
#include<QDir>
MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    map = new QWebEngineView(this);
    //Load HTML file
    QDir temDir("C:/Users/16198/Desktop/LearnToA/C++Learn/QTCode/day9/map/baidumap.html");
    QString absDir = temDir.absolutePath();
    QString filePath = "file:///" + absDir;
    //Display map
    map->page()->load(QUrl(filePath));

}
MainWindow::~MainWindow()
{
    delete ui;
}
void MainWindow::resizeEvent(QResizeEvent *event)
{
    map->resize(this->size());
}

In this way, it can be displayed. The function of resizeEvent event is to spread the map all over the interface. Note that the address of Baidu map.html file can be changed to its own.
Operation results:

3. Special attention

Must be changed to Release!!!, Personally, I think it's the easiest to fall into this pit. At that time, I always thought that my code was wrong.

summary

The implementation of loading map is relatively simple, but you still need to understand the whole process of the code. The next step is to realize the interaction between qt and js.