Qt —— QWebEngineView加载谷歌离线地图（包含离线地图瓦片下载制作、附谷歌地图开发文档）

已于 2025-03-27 18:19:23 修改
阅读量9.8k 收藏 108
点赞数 6
CC 4.0 BY-SA版权
分类专栏： Qt 文章标签： qt 地图 离线地图
于 2020-06-02 11:36:20 首次发布
automoblie0
本文链接：https://blog.youkuaiyun.com/automoblie0/article/details/106492882
本文介绍了如何使用Qt的QWebEngineView控件加载离线谷歌地图，包括离线地图瓦片的下载、本地HTML加载和Qt编程方法。首先，使用水经注万能地图下载器获取谷歌地图瓦片，然后在Qt项目中设置QWebEngineView，通过加载含有离线地图的HTML文件实现地图显示。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

🔔 Qt 相关技术、疑难杂症文章合集（掌握后可自封大侠 ⓿_⓿）（记得收藏，持续更新中…）

 

Qt效果

在这里插入图片描述

 
在这里插入图片描述

 

说明

     在工程项目中经常会与地图打交道，那么客户端软件如何加载地图呢？一种是加载在线地图，该加载方式优点是有网络情况下编程较为方便；缺点是必须有网并不利于对地图进行显示编程。相对的另外一种加载方式就是离线地图了，该加载方式基本没有什么缺点但只是需要编程前对离线地图进行制作仅可。

     本文介绍离线加载方式并会介绍地图瓦片的下载与本地html加载、Qt加载离线html方法等。

 

准备

     1、水经注万能地图下载器

了解本专栏 订阅专栏 解锁全文 超级会员免费看
QT5.9.2 QWebEngineView实现百度离线地图示例
05-22
使用Qt5.9.2实现百度离线地图，可以用于离线地图的项目开发中。代码中给出了Qt给js发送数据和js给Qt发送数据的双向传递
Qt加载google earth
07-04
借助Com组件，加载Google Earth，通过调用Google Earth API，使地图显示在Qt界面之中，讲解链接https://blog.youkuaiyun.com/zmxzmx110/article/details/80914006
QT加载百度在线地图完整工程：让地图开发更简单
最新发布
gitblog_06774的博客
05-28 620
QT加载百度在线地图完整工程：让地图开发更简单 【下载地址】QT加载百度在线地图完整工程 本资源库提供了一份完整的QT加载百度在线地图工程项目，非常适合初学者学习和使用。通过详细的步骤指导和丰富的实践，帮助您快速掌握QT开发，并深入理解地图API的使用方法。项目代码注释清晰，实用性强，适用于多种实际场景，并配有详细说明文...
C++(Qt)-GIS开发-QGraphicsView显示瓦片地图简单示例
mahuifa的博客
07-06 2726
支持多线程加载显示本地离线瓦片地图(墨卡托投影)； 瓦片切片规则以左上角为原点（谷歌、高德、ArcGis等），不支持百度瓦片规则； 支持显示瓦片网格、编号信息。 支持鼠标滚轮缩放切换地图层级。 支持鼠标拖拽。
QT实现加载百度离线地图
热门推荐
John_kai的博客
05-12 2万+
在Qt中加载百度地图需要用到网络浏览器，在此采用webEngine模块，然后用webchannel进行qt与HTML/JavaScript的交互。 需求描述：软件加载百度地图，用鼠标在地图上选点，并进行标号，每次加1，最后连成一条路径，为后期工作做准备。 百度地图API应用 采用百度离线地图API2.1版本，网上均可以下载到，然后放到项目debug文件夹下 瓦片地图下载，可以采用全能地图下...
GIS开发三：加载谷歌离线地图（QWebEngineView）
WHEgqing的专栏
03-31 1465
参考文档 QWebEngineView加载谷歌离线地图 中介绍通过水经注万能地图下载器可以下载所需的离线地图。但是这个水经注需要注册后才能下载地图。 参考文档 GIS开发二：批量下载和拼接地图瓦片 中介绍了如何手搓代码下载所需的离线地图。
Qt加载离线地图
pzs0221的专栏
04-24 1万+
一、例子 QWebEngineView加载谷歌离线地图 二、
Qt4.8.5版本加载谷歌地图.zip
11-25
Qt4.8.5版本加载谷歌地图，网页显示，可以调节大小，缩放地图，鼠标操作，可实现跨平台运行 谷歌地图可以修改网页参数，显示对应的位置
QT5 QWebEngineView实现离线百度地图API
05-30
QT5 QWebEngineView实现离线百度地图API
Qt中使用QWebEngine加载百度离线地图，在特定地点加载个圣诞树
疯狂挖掘机的博客
12-30 3066
QT中使用百度离线地图加载gif圣诞树。
Qt加载百度离线地图
12-01
Qt4.8.6加载百度离线地图，实现了街道图和卫星图的切换，实现了地图中标签的移动，实现了获取地图坐标并在Qt界面显示。绝对原创，保证可用
QT5 QWebEngineView实现百度离线地图示例（ubuntu系统下再解压）
01-04
.tar.gz格式，ubuntu系统下可正常解压 使用Qt5.9.2实现百度离线地图，可以用于离线地图的项目开发中。代码中给出了Qt给js发送数据和js给Qt发送数据的双向传递
Qt加载百度地图和谷歌地图
11-30
让Qt完美的加载百度地图和谷歌地图，涉及到了js和html。Qt中加载网页，需要用到这个QWebView这个类，就可以将网页加载出来。Qt 551MSVC版本
Qt加载百度离线地图 百度地图离线API 1.3 保证可用
01-22
Qt加载百度离线地图 1.下载百度地图离线API 1.3 下载链接：http://download.youkuaiyun.com/detail/caoshangpa/9476608，网上虽然出现了2.0版本离线API，但是经试用，存在很多问题。该1.3版本离线API也是由高人制作，我只是优化了一下，去掉了百度的logo。 2.下载瓦片地图 百度地图是由一张张正方形瓦片组成，在拖动地图时，只加载可视范围内的瓦片。如下图所示，每个方格代表一个瓦片，这样就可以通过访问百度瓦片地图服务器下载瓦片地图。有高人制作了下载工具，**电子地图下载器。 3.加载瓦片地图 将下载的地图放在百度离线API指定的目录下，当然这个目录是可以通过API的源码更改的。我使用的目录是maptile(卫星地图)和maptile_(街道地图)。这样通过html引用百度离线API时，地图就显示出来了。 参考链接：http://www.cnblogs.com/i-gps/archive/2012/11/28/2791826.html 4.Qt与JavaScript的交互 当QWebkit加载html显示地图后，只能显示地图，如果想通过Qt界面操作地图或者将地图信息显示到Qt界面，就需要实现Qt与JavaScript的交互，这可以参考我的另一篇微博http://blog.youkuaiyun.com/caoshangpa/article/details/51014690 最终的结果如下图所示，实现了地铁经纬度的显示，街道图和卫星图的切换和标注的移动
QT5 QWebEngineView实现离线百度地图APIV2_0
11-23
QT5 QWebEngineView实现离线百度地图APIV2_0，QWebChannel实现qt与js交互
【免费下载】 QT加载百度离线地图教程
gitblog_06517的博客
09-20 951
QT加载百度离线地图教程 【下载地址】QT加载百度离线地图教程 QT加载百度离线地图教程本仓库提供了一个资源文件，详细介绍了如何在QT中加载百度离线地图 项目地址: https://gitcode.com/Resource-Bun...
如何用使用qt实现qwebengineview加载百度离线地图可触屏拖动
10-25
在Qt中使用QWebEngineView加载百度离线地图并实现实体拖动功能，你需要做以下几个步骤： 1. **环境准备**: - 首先确保安装了Qt的开发环境，并集成有QWebEngine库，这是支持HTML5网页处理的基础。 - 安装`qBittorrent`或类似工具下载百度提供的离线地图资源。 2. **下载并解压地图数据**: - 下载百度地图的离线地图包（通常是MBTiles格式），然后解压缩到本地目录。 3. **配置QWebEngineView**: - 在Qt项目的UI设计中，添加一个`QWebEngineView`控件，设置初始URL为空以便自定义加载内容。 4. **加载地图**: - 使用JavaScript通过`QWebEngineView`的`setHtml()`或`loadFinished.connect()`信号动态加载地图页面。例如，你可以创建一个`.html`文件，其中包含加载地图所需的JS脚本和HTML模板。 ```html <!DOCTYPE html> <html> <head> <script src="https://cdn.bootcdn.net/ajax/libs/leaflet/1.7.1/leaflet.js"></script> </head> <body> <div id="map" style="height: 600px;"></div> <script> // 这里使用Leaflet加载地图和地图数据 var map = L.map('map').setView([your_latitude, your_longitude], 15); L.tileLayer('tileserver_url', { attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors', maxZoom: 18, tileSize: 512, zoomOffset: -1 }).addTo(map); // 如果是MBTiles文件，需要使用Leaflet.MBTiles或其他插件 L.tileLayer('mbtiles:///path/to/your/offline/tileset.mbtiles', {}).addTo(map); </script> </body> </html> ``` 替换`your_latitude`, `your_longitude`, 和 `tileserver_url`为实际的地图位置和MBTiles路径。 5. **处理交互事件**: - 使用JavaScript监听地图事件，如鼠标点击、触摸滑动等，然后将这些事件映射到Qt应用程序中，可以使用`QMetaObject.invokeMethod()`来触发Qt中的槽函数。 6. **槽函数实现**: - 在Qt中，你可以编写响应地图操作的槽函数，比如拖拽地图、缩放等。 ```cpp void MyWidget::on_mapDragged(const QUrl& url) { // 在这里处理地图拖动后的逻辑 } ``` 注意，由于涉及到跨域问题，如果百度离线地图服务不允许直接在网页上运行，你可能需要在服务器端搭建一个代理，或者寻找其他允许离线使用的地图API。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

信必诺

嗨，支持下哥们呗。

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值