[QT] QT加载百度离线地图（二）

yunke120

已于 2022-11-22 16:47:25 修改

阅读量6.1k

点赞数 11

分类专栏： QT 文章标签： qt 百度地图

于 2022-05-11 23:16:04 首次发布

本文链接：https://blog.csdn.net/qq_39295354/article/details/124720637

版权

QT 专栏收录该内容

21 篇文章 16 订阅

订阅专栏

感谢小郭软件提供的离线地图下载工具，这个失效了，文章末尾会附上下载链接，使用方式参见链接

一、下载离线地图相关文件

确保文件夹baiduLX_JS-master\bmap-offline\下的tiles、tiles_hybird、tiles_satellite中是空的，我们需要下载我们自己的地图文件

如何下载地图？
（1）双击运行BMapTool程序，
（2）切换导航到“下载地图”
（3）点击区域下载，在地图上画个框后，弹出窗口中选择瓦片级数
（4）选择目录并点击确认后，打开下载工具
（5）在下载工具中点击“开始下载”。
最后得到的离线文件结构如图
在这里插入图片描述
其中得images、libbrary、modules不需要改动，map3.0.js和map3.0_init.js是你的网页文件index.html需要引用的，也不要改动，除非你要修改离线地图瓦片的保存位置，需要修改map3.0_init.js文件，tiles、tiles_hybird、tiles_satellite是我们下载的地图瓦片文件，sample.html是作者提供给我们的示例文件，可以修改为我们的index.html

二、在QT中创建示例工程

QT5.13.0 + VS2017
参考此文章，记录了在QT中加载百度在线地图的示例，离线工程基本与在线是一样的，不同的只在index.html之中

‘widget.h’

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>
#include <QWebEngineHistory>
#include <QWebEngineHistoryItem>
#include <QWebEnginePage>
#include <QWebEngineView>
#include <QtWebEngineWidgets/QtWebEngineWidgets>

namespace Ui {
class Widget;
}

class Widget : public QWidget
{
    Q_OBJECT

public:
    explicit Widget(QWidget *parent = nullptr);
    ~Widget();

private slots:

    void on_pushButton_2_clicked();

signals:

private:
    Ui::Widget *ui;
};

#endif // WIDGET_H

‘widget.cpp’

#include "widget.h"
#include "ui_widget.h"
#include <QStringLiteral>

Widget::Widget(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::Widget)
{
    ui->setupUi(this);

    QString htmlPath = QCoreApplication::applicationDirPath() + "/html/";
    QString htmlFile = htmlPath + "index.html";
    qDebug() << htmlFile;
    QFile file(htmlFile);
    if(!file.exists())
        qDebug() << "html file is not exist";
    QWebChannel *webChannel = new QWebChannel(ui->widget->page());
    ui->widget->page()->setWebChannel(webChannel);
    webChannel->registerObject(QString("JSInterface"), ui->widget);

    ui->widget->page()->load(QUrl("file:///" + htmlFile));

}

Widget::~Widget()
{
    delete ui;
}


void Widget::on_pushButton_2_clicked()
{
    QString str = ui->lineEdit->text();
    QString lon1 = str.split(",")[0];
    QString lat1 = str.split(",")[1];
    QString lon2 = str.split(",")[2];
    QString lat2 = str.split(",")[3];
    QString cmd=QString("drawLine(%1,%2,%3,%4)").arg(lon1).arg(lat1).arg(lon2).arg(lat2);
//    qDebug() << cmd;
    ui->widget->page()->runJavaScript(cmd);
}

‘widget.ui’

<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
 <class>Widget</class>
 <widget class="QWidget" name="Widget">
  <property name="geometry">
   <rect>
    <x>0</x>
    <y>0</y>
    <width>823</width>
    <height>480</height>
   </rect>
  </property>
  <property name="windowTitle">
   <string>Widget</string>
  </property>
  <layout class="QGridLayout" name="gridLayout">
   <item row="0" column="0">
    <layout class="QHBoxLayout" name="horizontalLayout_2" stretch="1">
     <item>
      <widget class="QGroupBox" name="groupBox">
       <property name="title">
        <string>GroupBox</string>
       </property>
       <layout class="QGridLayout" name="gridLayout_2">
        <item row="0" column="0">
         <layout class="QVBoxLayout" name="verticalLayout_2" stretch="10,1">
          <item>
           <widget class="QWebEngineView" name="widget" native="true"/>
          </item>
          <item>
           <layout class="QHBoxLayout" name="horizontalLayout_3">
            <item>
             <widget class="QLineEdit" name="lineEdit"/>
            </item>
            <item>
             <widget class="QPushButton" name="pushButton_2">
              <property name="text">
               <string>设置标点</string>
              </property>
             </widget>
            </item>
           </layout>
          </item>
         </layout>
        </item>
       </layout>
      </widget>
     </item>
    </layout>
   </item>
  </layout>
 </widget>
 <layoutdefault spacing="6" margin="11"/>
 <customwidgets>
  <customwidget>
   <class>QWebEngineView</class>
   <extends>QWidget</extends>
   <header location="global">qwebengineview.h</header>
   <container>1</container>
  </customwidget>
 </customwidgets>
 <resources/>
 <connections/>
</ui>

3、创建index.html

<!DOCTYPE html>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
		body,
		html,
		#allmap {
			width: 100%;
			height: 100%;
			overflow: hidden;
			margin: 0;
			font-family: "微软雅黑";
		}
	</style>
	<!-- 百度地图3.0 离线API Begin -->
	<script type="text/javascript" src="./map3.0_init.js"></script>
	<script type="text/javascript" src="./map3.0.js"></script>
	<script type="text/javascript" src="./qwebchannel.js"></script> <!-- 与qt交互 -->
	<!--script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0"></script-->
	<!-- 百度地图3.0 End -->
	<title>地图展示</title>
</head>

<body>
	<div id="allmap"></div>
</body>

</html>
<script type="text/javascript">
	// 百度地图API功能
	var map = new BMap.Map("allmap");    // 创建Map实例
	map.centerAndZoom(new BMap.Point(113.557892, 34.8333), 15);  // 初始化地图,设置中心点坐标和地图级别
	//添加地图类型控件
	map.addControl(new BMap.MapTypeControl({
		mapTypes:[
	        BMAP_NORMAL_MAP,
	        BMAP_SATELLITE_MAP,
	        BMAP_HYBRID_MAP
	    ]}));	
	//离线不支持
	//map.setCurrentCity("北京");          // 设置地图显示的城市 此项是必须设置的

	map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放

	// 创建标点  
	var point = new BMap.Point(113.557892,34.8333);
	var marker = new BMap.Marker(point);        // 创建标注   
	map.addOverlay(marker);
	// marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画

	new QWebChannel(qt.webChannelTransport,
		function (channel) {
			window.JSInterface = channel.objects.JSInterface; // 注册
		}
	);

	function myMarker(lng, lat) {
		allMarker = map.getOverlays(); //保存所有标注
		var newpoint = new BMap.Point(lng, lat);  
		var newmarker = new BMap.Marker(newpoint);        // 创建标注
		map.addOverlay(newmarker);
		//alert('ok');
	};

	function drawLine(lng1,lat1,lng2,lat2) {
		var line = new BMap.Polyline([
			new BMap.Point(lng1, lat1),
			new BMap.Point(lng2, lat2)
		], {strokeColor:"red", strokeWeight:2, strokeOpacity:1});
		map.addOverlay(line);
	}
</script>

在第19，20，21行引用了外部js文件和qt与js交互文件

	<script type="text/javascript" src="./map3.0_init.js"></script>
	<script type="text/javascript" src="./map3.0.js"></script>
	<script type="text/javascript" src="./qwebchannel.js"></script> <!-- 与qt交互 -->

其它与上一篇文章基本一样

四、结果

在这里插入图片描述

五、参考

小郭软件
 Carlos·Wei

百度地图瓦片离线下载工具（失效）
示例demo（失效）

开源链接

https://github.com/yunke120/Qt-BDMap.git

更新文件链接

链接基本失效了，文件指路main分支是在线地图，offline是离线地图，下载不下来再在评论区call我各位
在这里插入图片描述

yunke120

关注

11
点赞
踩
110

收藏

觉得还不错? 一键收藏
61
评论
[QT] QT加载百度离线地图（二）

感谢小郭软件提供的离线地图下载工具，这个失效了，文章末尾会附上下载链接，使用方式参见链接一、下载离线地图相关文件确保文件夹baiduLX_JS-master\bmap-offline\下的tiles、tiles_hybird、tiles_satellite中是空的，我们需要下载我们自己的地图文件如何下载地图？（1）双击运行BMapTool程序，（2）切换导航到“下载地图”（3）点击区域下载，在地图上画个框后，弹出窗口中选择瓦片级数（4）选择目录并点击确认后，打开下载工具（5）在下载
复制链接

扫一扫