QT实现加载百度离线地图
在Qt中加载百度地图需要用到网络浏览器,在此采用webEngine
模块,然后用webchannel进行qt与HTML/JavaScript的交互。
需求描述:软件加载百度地图,用鼠标在地图上选点,并进行标号,每次加1,最后连成一条路径,为后期工作做准备。
百度地图API应用
- 采用百度离线地图API2.1版本,网上均可以下载到,然后放到项目debug文件夹下
- 瓦片地图下载,可以采用全能地图下载器,下载好后放到指定文件夹
- 复制其中一个demo文件,根据自己需要的功能进行添加
地图展示
var map = new BMap.Map("map_demo",mapOptions); // 设置街道图为底图
var point = new BMap.Point(120.393751, 36.065743); // 创建点坐标
map.centerAndZoom(point,13); // 初始化地图,设置中心点坐标和地图级别
鼠标点击标记加序号
用addEventListener("click",function(e))
对点击事件进行监听,参数e
会返回当前点的地理位置,然后在此处用Marker
添加标记,在实现每次标记加1时,因为标记本身是一个图片,因此可以考虑对标记加标签(定义一个全局的i
,每点击一次加1),然后调整下位置(为了美观),背景设置为透明,基本就可以实现所要的效果。标签的颜色和背景可以使用Label
类下的setStyle
方法设置:
label.setStyle({color:"white",backgroundColor:"0",border:"0";fontsize:"13px"
});
生成轨迹
创建一个全局空数组,在上一步中监听点击事件,参数e
返回位置点,将此点push
到数组中,在生成轨迹时将数组序列直接传入Polyline
,然后map.addOverlay(polyline)
即可加载标签。
具体的类和方法参见百度地图JavaScript API 2.0和示例Demo
Qt与html交互
地图全屏显示
用wenEngine全屏显示地图时的代码:
//mainwidow中的函数
view=new QWebEngineView(this);
view->load(url);
view->show();
添加:
void MainWindow::resizeEvent(QResizeEvent *)
{view->resize(this->size());
}
地图在一个 widget
中显示
在UI设计界面,我的qt5.9版本是找不到wenEngineView
组件的,解决方法:在ui设计页面,拖入widgets
控件,然后提升为QWebengineView
,如图所示:
在mainwindow函数中进行webengine初始化:
QWebEnginePage *page=new QWebEnginePage(this);QWebChannel *channel=new QWebChannel(this);page->load(url);page->setWebChannel(channel);ui->webEngine->setPage(page);
新版的Qt摒弃了webkit,采用webengine,在交互上简单了很多,例如生成路径
按钮的槽函数:
void MainWindow::on_generatetrack_clicked()
{QString cmd="generate_track()";ui->webengine->page()->runJavaScript(cmd);
}
其中generate_track()
为html文件中的函数,只需要一条语句即可实现交互。
最终效果如图:
后期加的功能1
功能:实现小车沿路径运动
有两种方案:
- 采用百度地图开源库LuShu实现
- 采用定时器,定时将小车作为标注显示在路径点上。
第二种方案适合于路径点很密集,很多的情况,才能看出效果。由于这个项目是采用鼠标选几个位置,因此适合采用第一种方案。
实现部分:
- 添加lushu的js文件
<script type="text/javascript" src="tools/LuShu_min.js"></script>
- 根据上边保存的路径点数组,实例化一个全局lushu对象,放在
generate_track
函数里
lushu=new BMapLib.LuShu(map,track_point,{icon:icon1,//图标可以自己添加,也可以默认为百度的红色标注小气球speed:3000,autoView:false,enableRotation:true});
- 最后在需要开始运动的函数里添加下面函数就可以
lushu.start();
后期加的功能2
功能:对已经选择的路径点通过输入经纬度进行修改(生成路径前后均可修改)
首先在Qt中添加以下代码(前提是在界面中设置好文本框和修改
按钮):
void MainWindow::on_modify_clicked()
{QString number=ui->orderNumber->text();QString lng=ui->lngEdit->text();QString lat=ui->latEdit->text();QString cmd=QString("modifyMarker(\"%1\",\"%2\",\"%3\")").arg(number).arg(lng).arg(lat); //modifyMaker是html文件中的函数ui->webengine->page()->runJavaScript(cmd);
}
在html文件中添加:
function modifyMarker(number,lng,lat){allMarker=map.getOverlays(); //保存所有标注var newpoint=new BMap.Point(lng,lat);allMarker[number-1].setPosition(newpoint);track_point[number-1]=newpoint;if(allMarker[allMarker.length-1].toString()!="[object Marker]"){ //看array中最后一个元素是不是polylinemap.removeOverlay(polyline); //来判断生成路径之前generate_track(); //还是生成路径之后修改路径点}
}
由于没有系统学习过JavaScript,其中if中的判断语句参考了下面图片中的方法,意思就是判断最后一个覆盖物是不是Marker
对象。
在getOverlays()
后不知道为什么多一个隐藏的标注,所以在选路径点时先清理一次所有的标注,即在选路径点
的函数中首先添加:
map.clearOverlays();
QT实现加载百度离线地图相关推荐
- Qt之加载百度离线地图(WebKit和WebEngine)
最近翻看进年前写了一篇关于百度离线地图的博客:Qt加载百度离线地图,发现存在很多问题,比如不能加载折线等图形覆盖物:只支持QtWebKit,不支持QtWebEngine. 之前做项目需要在百度离线地图 ...
- Qt加载百度离线地图
1.下载百度地图离线API 1.3 下载链接:http://download.csdn.net/detail/caoshangpa/9476608,网上虽然出现了2.0版本离线API,但是经试用,存在 ...
- 不同分辨率加载不同js_OpenLayers加载百度离线瓦片地图(完美无偏移)
本文使用OpenLayers最新版本V5.3.0演示:如何使用OpenLayer完美无偏移加载百度离线瓦片地图.OpenLayers 5.3.0下载地址为:https://github.com/ope ...
- axtoolbarcontrol加载图层后还是灰的_OpenLayers加载百度离线瓦片地图(完美无偏移)...
本文使用OpenLayers最新版本V5.3.0演示:如何使用OpenLayer完美无偏移加载百度离线瓦片地图.OpenLayers 5.3.0下载地址为:https://github.com/ope ...
- 无偏移谷歌瓦片地址_OpenLayers加载百度离线瓦片地图(完美无偏移)
百度地图离线瓦片下载使用"迈高图-地图数据下载器"(以下简称:迈高图),演示数据以湖南省长沙市芙蓉区12~18级瓦片数据为例. 如果对本文有任何疑问或建议,欢迎到这里发文讨论. 下 ...
- Dazdata BI加载百度在线地图并标注
Dazdata BI除了内置了全国瓦片地图,支持自定义园区瓦片地图等功能外,还支持加载百度在线地图,并方便的进行标注. 下面以全国空气污染前十城市标注为例,看如何实现: 首先要去百度地图开放平台,注册 ...
- [QT] QT加载百度在线地图(一)
一般步骤 在百度地图开发者网站中获取密钥 在QT中创建示例工程 创建网页index.html 运行 参考 一.在百度地图开发者网站中获取密钥 选择Javascript API 完成以下三步 在控制台- ...
- Arcgis加载WMTS离线地图服务
ARCGIS搭建离线地图服务器,进行离线地图二次开发 1. 离线地图金字塔瓦片数据 (下载数据教程:http://www.bigemap.com/helps/doc20190312126.h ...
- 前端加载高德离线地图的解决方案
核心是需要下载地图瓦片放在本地,脱离在线地图服务,实现离线加载地图. 使用BIGMap工具下载地图离线瓦片到本地 下载地址:http://www.bigemap.com/reader/download ...
最新文章
- 如何理解导远技术手册
- 结构体内指针数组调用_指针的这些技巧你都掌握了吗
- 手动配置mysql_手动配置Mysql,无需安装的方法以及Mysql的一些基本命令
- PRML-系列一之1.6
- api查询所有记录 zabbix_通过Zabbix API获取历史监控数据
- linux c 大全,linux c 程序设计大全(吴岳) 求助
- 仿函数适配器(mem_fun/mem_fun_ref)
- 一个html可以有几个h1,一个页面可以有多个H1标签吗?
- 鸡啄米vc++2010系列25(滚动条控件Scroll Bar)
- CPU cache侧信道攻击
- 3种团队分组适应项目_分组团队竞赛活动方案
- Android使用局域网打印机生成打印任务
- 网易考拉海购软件测试岗怎么样,【网易考拉海购运营专员面试】面官态度倨傲,社区理念不明,995工作,很不推荐-看准网...
- Laya Air游戏开发模式之MVC模式(核心篇)
- 初中生怎样学习编程语言?
- verilog练习:hdlbits网站上的做题笔记(5)
- win2003 IIS6+PHP5+MySQL5+Zend Optimizer+phpMyAd
- C语言将一个简单的文件压缩
- Python基础之控制结构
- pr 增加配置文件和级别_premiere渲染设置里的级别是什么意思?