QT5 Baidu map development and learning - map display


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.

# 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

    main.cpp \


FORMS += \

# 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


#include <QMainWindow>
namespace Ui { class MainWindow; }

class MainWindow : public QMainWindow

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

mainwindow.cpp file.

#include "mainwindow.h"
#include "ui_mainwindow.h"
MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
    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

    delete ui;
void MainWindow::resizeEvent(QResizeEvent *event)

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.

DebugDebug is usually called debugging version. Through the cooperation of a series of compilation options, the compiled results usually contain debugging information without any optimization, so as to provide developers with strong application debugging ability. When the program has errors, debug the program by setting breakpoints in debug mode.
ReleaseRelease is usually called release version and is used by users. Generally, customers are not allowed to debug on the release version. Therefore, the debugging information is not saved. At the same time, it often carries out various optimizations in order to minimize the code and optimize the speed. Provide convenience for users.


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.

Tags: Qt Qt5

Posted on Mon, 01 Nov 2021 07:12:07 -0400 by met0555