QT5百度地图开发学习——地图显示

2023-10-25 14:06:40

文章目录

前言
一、工程创建
二、地图显示
总结

前言

当qt5+MSVC环境搭建成功和将baidumap.html，qwebchannel.js准备好之后，我们可以开始进行开发啦，不过在此之前，你可能需要学习一下QT5知识，在这里是默认你会一定的Qt知识与JavaScript知识。

一、工程创建

首先新建一个qt项目，这个就不赘述了。建好之后如图所示：

在其根目录下放入baidumap.html，qwebchannel.js文件。如图：
还是要注意上一个文档中的，你的秘钥要改复制粘贴为你自己的秘钥。
当然，其实QT里面也可以编辑JavaScript代码的，在接下来的QT与JS的通信操作中，需要再baidumap.html里面写js代码。

二、地图显示

1.pro文件更改

添加webenginewidgets模块,也可以把两个文档添加进来，直接用右键添加工程文档即可。.pro文件内容如图,其实就是修改了QT += core gui webenginewidgets这一行。

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.载入地图显示

直接上代码吧。
mainwindow.h文件

#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文件。

#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);
    //加载HTML文件
    QDir temDir("C:/Users/16198/Desktop/LearnToA/C++Learn/QTCode/day9/map/baidumap.html");
    QString absDir = temDir.absolutePath();
    QString filePath = "file:///" + absDir;
    //显示地图
    map->page()->load(QUrl(filePath));

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

这样就能显示了，其中resizeEvent事件的功能是使地图铺满整个界面。注意其中的baidumap.html文件地址更改成自己的就行。
运行结果：

3.特别注意

必须改为Release!!!，个人认为最容易掉这个坑了，当时我一直以为是自己代码写错了。

模式	含义
Debug	Debug 通常称为调试版本，通过一系列编译选项的配合，编译的结果通常包含调试信息，而且不做任何优化，以为开发人员提供强大的应用程序调试能力。在程序出现错误的时候，在debug模式下通过设置断点来调试程序。
Release	Release通常称为发布版本，是为用户使用的，一般客户不允许在发布版本上进行调试。所以不保存调试信息，同时，它往往进行了各种优化，以期达到代码最小和速度最优。为用户的使用提供便利。

总结

加载地图实现还是比较简单的，但还是需要把代码的整个过程理解清楚，下一步就是实现qt与js交互。

码农公寓