前言

当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 webenginewidgetsgreaterThan(QT_MAJOR_VERSION, 4): QT += widgetsCONFIG += 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.0SOURCES += \main.cpp \mainwindow.cppHEADERS += \mainwindow.hFORMS += \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_NAMESPACEclass MainWindow : public QMainWindow
{Q_OBJECTpublic: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交互。

QT5百度地图开发学习——地图显示相关推荐

QT5百度地图开发学习——qt调用JavaScript函数并传参
文章目录前言一.通信桥梁bridge 二.QT与JS相互通信(调用函数) 1.QT调用js函数前言在上文<QT5百度地图开发学习--控件提升展示地图>中,我们通过控件提升的方式在同 ...
QT5百度地图开发学习——qt调用输入位置坐标位置进行百度地图定位
系列文章目录上一章: QT5百度地图开发学习--JavaScript调用qt函数并传参给qt 文章目录系列文章目录前言一.界面设计二.槽函数总结前言本文实现输入坐标然后在地图上显示位置 ...
Android学习 - 百度地图开发基础
什么是百度地图API? 百度地图移动版API(Android)是一套基于Android 1.5及以上设备的应用程序接口,通过该接口,您可以轻松访问百度服务和数据,构建功能丰富.交互性强的地图应用程序. ...
基于Android的百度地图开发
参考资料: android studio获得SHA1的值,然后在百度地图移动版API官网申请key Android Studio怎么查看程序的安全码获取SHA1值? http://www.codese ...
[android] 百度地图开发 (二).定位城市位置和城市POI搜索
一. 百度地图城市定位和POI搜索知识上一篇文章"百度地图开发(一)"中讲述了如何申请百度APIKey及解决显示空白网格的问题.该篇文章主要讲述如何定位城市位置.定位 ...
Android 百度地图开发（三）--- 实现比例尺功能和替换自带的缩放组件
转载请注明出处:http://blog.csdn.net/xiaanming/article/details/11821523 貌似有些天没有写博客了,前段时间在忙找工作的事,面试了几家公司,表示反响 ...
Android 百度地图开发（二）
前面我们一起了解了百度地图的申请与集成Android 百度地图开发(一),今天我们接着来学习百度地图. 今天主要来了解如下问题: 1.百度地图的生命周期控制上一篇张我们已经在布局文件里增加了mapV ...
Android百度地图开发入门教程
Android百度地图开发入门教程 1.平台注册登录 2.创建应用 3.Android studio配置 4.代码编写 5.最终效果(建议真机) 1.平台注册登录登录百度地图开放平台网站注册并登录 ...
百度地图开发之——百度地图鹰眼轨迹管理台DEMO-v3部署到服务器上
百度地图开发官方下载口:https://github.com/baidu-openmap-trace/web-demo-v3 第一:部署准备搭建NPM和FIS3的环境 1.安装node.js:htt ...

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

文章目录

前言