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.
pattern | meaning |
---|---|
Debug | Debug 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. |
Release | Release 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. |
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.