一、前言说明

最近花了半年时间,专门重构了整个地图组件,之前写的比较粗糙,有点为了完成功能而做的,没有考虑太多拓展性和易用性。这套地图自检这几年大量的实际项目和用户使用下来,反馈了不少很好的建议和意见,经过这几年的整理,刚好趁着近期经济下行严重,抽出时间把整个地图组件重构一下,首要的任务就是搞个地图基类,然后子类分别实现不同地图的具体功能。

实际编码过程中发现,无论是百度地图还是高德地图或者天地图等,能够提取出来的共性特别多,甚至很多处理函数都一样,所以在地图基类mapobjbase的基础上,又单独搞了个mapobjfun静态函数类,专门放置的通用的js函数处理,比如设置地图中心,获取和设置缩放级别,坐标字符串传坐标对象等。这样可以节约大量的重复代码,同时万一有相同的处理,还可以直接改动一处就所有地图内核都通用。

在整个组件的重构过程中,遇到过很多疑难杂症,当你把各个地图厂家提供的js开发手册全部实现一遍的时候,会发现大厂的程序员也不是很有水平,也存在不少的bug,我们能做的就是尽量规避这些bug,绕弯解决,而不是硬要在这种bug上死耗。比如一个办法就是自己写js去实现一部分的功能,这样就可以非常巧妙的避开,这在我们平时的编程过程中是一个很好的习惯。

二、功能特点

  1. 支持多种地图内核,默认采用百度地图,可选高德地图、天地图、腾讯地图等。
  2. 同时支持在线地图和离线地图两种模式,离线地图方便在不联网的场景中使用。
  3. 支持各种地图控件的启用,比如地图导航、地图类型、缩略图、比例尺、全景导航、实时路况、绘图工具、结果面板等。
  4. 支持多种地图功能的动态启用禁用,比如地图拖曳、键盘操作、滚轮缩放、双击放大、连续缩放、地图测距等。
  5. 提供众多js函数接口用于交互,参数极其丰富,能够想到的应用场景需求都有。
  6. 统一的信号槽机制,地图中的结果统一信号发送出去,收到后根据type类型区分。
  7. 支持地图交互,比如鼠标按下获取对应位置的经纬度。单击标注点弹出对应点的信息。
  8. 支持添加标注、删除标注、移动标注、清空标注。
  9. 标注点可以指定图标图片和尺寸,支持gif动图,支持指定以图片中心对齐还是底部中心对齐。可以设置旋转角度,带富文本提示信息。
  10. 标注点事件支持单击发信号通知和自己弹框显示信息。
  11. 提供地址转坐标和坐标转地址接口。
  12. 支持各种图形绘制,包括折线图、多边形、矩形、圆形、弧线等。
  13. 可显示悬浮的绘图工具栏,直接在地图上划线、标注点、矩形、圆形等。
  14. 支持各种区域搜索,比如矩形区域、圆形区域,可以按照关键字匹配将搜索结果显示在地图中。
  15. 可动态添加离线的行政区边界点数据。可以搜索行政区划并获取该区域的边界点数据。数据可以保存到文件以便离线使用。
  16. 支持点聚合功能,多个小标注点合并到一个大标注点,防止点密集导致交互不友好。
  17. 可以添加海量点,每个点都可以单击获取对应坐标和信息。
  18. 所有的覆盖物信息比如标注点、矩形、多边形、折线图等,都可以主动获取对应的信息比如坐标点和路径等。
  19. 支持路径规划,支持公交路线、自驾路线、步行路线、骑行路线,不同查询支持不同策略,可选最少时间、最少换乘、不走高架等。
  20. 路径规划结果可以显示在地图中,也可以获取到路径点坐标集合。这个数据可以保存到文件,以便发给机器人或者无人机做导航用来轨迹移动。
  21. 可以设置不同的地图视图比如街道图、卫星图、混合图。
  22. 可以设置不同的样式,比如午夜蓝、青草绿等样式风格。
  23. 可以设置地图的旋转角度和倾斜角度。
  24. 提供经纬度坐标纠偏转换功能,比如传入的GPS坐标需要转换到百度地图坐标或者高德地图坐标。各种坐标系转换全部离线函数,支持地球坐标系WGS-84、火星坐标系GCJ-02、百度坐标系BD-09之间的互相转换,涵盖了各种地图的坐标系。
  25. 提供动态轨迹点移动功能,按照给定的经纬度坐标集合平滑移动。
  26. 同时支持qwidget和qml,支持编译到安卓系统运行。

三、代码使用

  1. 将core_map(地图组件)/core_webview(浏览器组件)这两个组件目录拷贝到你的项目目录,并在pro中填写引入代码加入到你的项目中。$$PWD/../表示上级目录。
include ($$PWD/../core_map/core_map.pri)
include ($$PWD/../core_webview/core_webview.pri)
  1. 在pro中启用地图内核,比如百度地图内核对应需要在pro文件中增加一行定义 DEFINES += baidux。
  2. 引入头文件。
#include "webview.h"
#include "mapbase.h"
  1. 新建一个窗体,上面放一个布局,推荐用表格布局 gridlayout,可以放多个浏览器控件。
  2. 实例化浏览器类和地图类。
//实例化浏览器控件
WebView *webView = new WebView(this);
//加入到布局
webView->setLayout(ui->gridLayout);
//实例化地图类/参数2表示何种地图内核
MapBase *mapObj = MapHelper::getMapObj(this, MapCore_BaiDu);
//传入网页控件用于执行函数
mapObj->setWebView(webView);
//加载地图
mapObj->load();
  1. 所有地图相关的函数接口在MapBase类中,可以打开mapbase.h查看具体说明。
  2. 地图中大部分的功能都是通过执行js函数来触发,比如添加标注、添加折线图等。这些必须严格按照提供的js函数名称和参数来执行。对应示例都提供了相关的调用方法。
  3. 部分函数接口。
QString js;
//设置地图级别(值越大放大/越小缩小)
js = "setZoom(9)";
//街道图卫星图切换(0-街道图/1-卫星图/2-混合图)
js = "setMapType(1)";
//添加一个标记(北京那边)
js = QString("addMarker('测试点', '测试地址', '', '', 100, '%1', 2)").arg("116.475836,40.251114");
//最终通过浏览器控件执行
webView->runJs(js);
  1. 浏览器组件使用示例。
//实例化浏览器控件
WebView *webView = new WebView(this);
//加入到布局
webView->setLayout(ui->verticalLayout);
//打开网址
webView->load("https://www.xxx.com", "", "");

四、相关链接

  1. 体验地址:https://pan.baidu.com/s/1ZxG-oyUKe286LPMPxOrO2A 提取码:o05q 名称:bin_map.zip
  2. 国内站点:https://gitee.com/feiyangqingyun
  3. 国际站点:https://github.com/feiyangqingyun

五、效果图



















Qt/C++最新地图组件发布/历时半年重构/同时支持各种地图内核/包括百度高德腾讯天地图的更多相关文章

  1. Vue3.0中引入地图(谷歌+高德+腾讯+百度)

    1 概述 项目需求需要引入地图,对于目前最新的Vue3.0,无论是百度/高德/腾讯地图目前还没有适配,只有Vue 2.x版本的: 目前只有谷歌地图的Vue3.0适配: 但是没有适配并不代表不能使用,本 ...

  2. qt qml qchart 图表组件

    qt qml qchart 图表组件 * Author: Julien Wintz * Created: Thu Feb 13 23:41:59 2014 (+0100) 这玩意是从chart.js迁 ...

  3. 微信小程序-地图组件

    map 地图. 标记点 标记点用于在地图上显示标记的位置,不能自定义图标和样式 覆盖物 覆盖物用于在地图上显示自定义图标,可自定义图标和样式 地图组件的经纬度必填, 如果不填经纬度则默认值是北京的经纬 ...

  4. 第30课 Qt中的文本编辑组件

    1. 3种常用的文本编辑组件的比较 单行文本支持 多行文本支持 自定义格式支持 富文本支持 QLineEdit (单行文本编辑组件) Yes No No No QPlainTextEdit (多行普通 ...

  5. 【高德地图API】一句话搞定webmap(一)——轻地图组件

    原文:[高德地图API]一句话搞定webmap(一)——轻地图组件 摘要: 遥想当年,在APP中加入LBS元素相当困难:要刻苦学习java,要刻苦学习iOS开发,要刻苦学习javascript…… 而 ...

  6. 一句话搞定webmap(一)——轻地图组件

    摘要: 遥想当年.在APP中增加LBS元素相当困难:要刻苦学习java,要刻苦学习iOS开发,要刻苦学习javascript-- 而现在.要制作一张地图真是越来越easy了!居然仅仅须要一句话.就能够 ...

  7. vue-amap | 基于 Vue 2.x 与高德的地图组件

    vue-amap | 基于 Vue 2.x 与高德的地图组件 参考:https://elemefe.github.io/vue-amap/#/

  8. AngularJS指令封装高德地图组件

    1 概述 公司移动门户原来是基于AngularJS指令封装的百度地图组件,用于签到.签退.定位等功能,在使用过程中发现百度地图频繁的弹出广告,所以打算重新引用其它地图组件,最后决定基于AngularJ ...

  9. 解析 Qt 程序在Windows 下发布

    原文请看:http://www.cnblogs.com/elect-fans/archive/2012/03/15/2408579.html Qt 程序在Windows下发布是本文要介绍的内容,不多说 ...

  10. vue项目中使用地图组件

    一.引入高德地图 一般用使用vue-cli webpack最简单粗暴的引入地图api的方法就是,在入口index.html的头部直接引入,记得一定要带上key,如果没有的话去高德地图api的官网申请一 ...

随机推荐

  1. .NET云原生应用实践(三):连接到PostgreSQL数据库

    本章目标 实现基于PostgreSQL的SDAC(简单数据访问层) 将Stickers微服务切换到使用PostgreSQL SDAC 为什么选择PostgreSQL数据库? 其实并不一定要选择Post ...

  2. Machine Learning week_2 Multivariate Prameters Regression

    目录 1 Multivariate Prameters Regression 1.1 Reading Multiple Features 1.2 Gradient Descent For Multip ...

  3. Web渗透02_信息搜集

    以两个测试工具官方给出的用于工具实践的网站.一定不要拿在运营的网站做测试. http://testfire.net http://vulnweb.com DNS信息搜集 关注域名注册商,管理员的邮箱电 ...

  4. 《Selenium自动化测试实战:基于Python》之 基于Docker与Selenium Grid的测试技术

    基于Docker与Selenium Grid的测试技术                         10.1  Selenium Grid简介 尽管即将推出的Selenium 4.0对Seleni ...

  5. Dash 2.18.2版本更新:模式匹配回调性能大提升

    本文示例代码已上传至我的Github仓库:https://github.com/CNFeffery/dash-master Gitee同步仓库地址:https://gitee.com/cnfeffer ...

  6. BAT之shutdown命令

    今天想让电脑开机后固定时间后重启,但之前只用过关机的命令,就去查询资料,并将shutdown的命令用法整体记录一下. 1 ::取消关机 2 shutdown -a 3 4 ::关机 5 shutdow ...

  7. ubuntu服务器上部署EMQX SLL

    1.     安装MQTT的简易服务器集成环境EMQX $wget https://www.emqx.com/zh/downloads/broker/5.1.6/emqx-5.1.6-ubuntu18 ...

  8. git clone失败,超时,速度慢

    最近使用git这个工具,发现git clone指令经常由于网络问题导致失败.查找相关资料之后,找到办法为修改网址,具体为: 将 git clone https://github.com/alibaba ...

  9. Ansible自动化管理集群,Playbook语法

    Ansible配置文件存在优先级的问题 ANSIBLE_CONFIG ansible.cfg 项目目录 .ansible.cfg 当前用户的家目录 /etc/ansible/ansible.cfg A ...

  10. 不依赖 Spring,你会如何自实现 RabbitMQ 消息的消费(一)

    开心一刻 上午一好哥们微信我哥们:哥们在干嘛,晚上出来吃饭我:就我俩吗哥们:对啊我:那多没意思,我叫俩女的出来哥们:好啊,哈哈哈晚上吃完饭到家后,我给哥们发消息我:今天吃的真开心,下次继续哥们:开心尼 ...