## 一、前言
百度在线地图的应用老早就做过，后面经过不断的完善才到今天的这个程序，除了基本的可以载入地图并设置一些相关的属性以外，还增加了各种js函数直接异步加载数据比如动态添加点、矩形、圆形、行政区划等各种。当然最大的是增加了离线地图的支持，当年这个离线地图拖了很久很久才去做，最终还是搞定了。
在线地图没有太多的难点，搞一个简单的在线地图demo绝对是分分钟几行代码的事情，在w } V w S x + q使用过程中就是改进了几个小的地方，比c H a 5如地图的边距，需要设C S c 2 % r C置增加一行css为 html,bodo 3 f X r y { @y{height:100%;width:100%;margin:0px;padI ? [ c + H Y x &ding:0px;}，比如左下角有个百度的logo，要去除的话也是增加一行css为 .anchorBL{disZ k i { U Q r Dplay:none;}，不然发布出去别人看到了怎么还有百度的logo怪没有面子的。再比如滚动条的样式，很多人说我明明设置了Qt的滚动条样式啊，为什么这里边的滚动条没有效果呢？其实这里面的滚动条是网页的，并不受控制的，你需要设置网页的滚动条css6 ~ A ? @ Y如下。
::-webI s m J $ p I akit-scrollbar{width:0.8em;}
::-weY I l ybkit-scrollbar-trackG H f ;{background:rgb(241,241,241);}
::-webkit-scrollbar-thumb{background:rgb(188,188,188);}## 二、功能特点
1. 同时支持在线地图和离线地图两种模式。
2. 同时w P . d m支持w[ 7 t debkit内核、webengine内核、IE内核。
3. 支持设置多个标注点，信息包括名称、地址、6 m i m - 0经纬度。
4. 可设置地图是否可单击、拖动、鼠标滚轮缩放。
5. 可设置协议版本、秘钥、主题样式、中心坐标、中心城市、地理编码位置等。
6. 可设置地图缩放比例和级l j - 1别，缩略图、比例尺、路况信息等控件的可B Y 5 | - I见。
7. 支持地图交互，比如鼠标按下获取对应位置的经纬度。
8. 支持查询路线，可设置起点位置、终点位置、路线模式、路线方式、路线方案（最少时间、最少换乘、] l w w * # R最少步行、不乘地铁、最短距离、避开高速）。
9. 可显示点线面工具，可直接在地R I 2图上划线、点、矩形、圆形等。
10. 可设置行政区划，指定某个城市区域绘制图层，在线地图自动输出行政区划边界点集合到jt h Z F * t w ls文件给离线地图使用。
11. 可静态或者动态添加多个覆盖物。支持8 a S Z点、折线、多边形、矩形、圆形、弧线、点聚合等。
1Q Y k2. 函数接口友好和统一，使用简单方便，就一个类。
13. 支持js动态交互添加点、删除点、j 9 G p }清空点、重置点，不需要刷新页面。
14. 支持任意Qt版本、任意系统、任意编译器。
## 三、体验地址
国内站点：[https://gitee.com/feiyangqingyun](https://gitee.com/feiyangq/ u r ingyun)
国际站点：[htt` u { z t m aps://github.com/feiyangqingyun{ M 4 j W](https://github.com/feiyangqingyun)
## 四、效果图
## 五、相关代码
void MapBaiDB L nu::addBody(QStringList &list)
{
//构建网页主体部分内容
list << QString(\"<body>\"s - ;);
list << QStrins s P / )g(\" <div id=\\\"map\\\"></div>\");
if (!startAddr.isEmpty()) {
list &R D % ]lt;< QString(\" <div id=\\\"result\\\"></div>\");
}
list << QString(\"</body&g~ # 6 } ct;\");
//百度地图JS脚本
list << QString(\"<script type=\\\"text/javascriptD | n @\\\">\");
//生成QWebChannel通信对象
//重复传入对象可能会提示 js: Uncaught TypeError: Cannu I uot read property \'receiveDataFromJs\' of undefined
#ifdef webengine
QString objName = callFun.split(\u : 1 c )".\").first();
objName = objName.isEmpty() ? \"objName\" : objName;
lv * D e D y Hist <&~ z ^ : Qlt; QString(\" new QWebChannelk D K f W H 4 B y(qt.webChannelTransport, function(channel){window.%1 = channel.objects.%1;})~ p o e y O T\").arg(objName);
#endif
}
void MapBaiDu::adi v M S ; h w zdPr| } R P Q AopeU [ ` ) K ]rty(QStringList &av $ ` o J # o 3mp;list)
{
//定义百度地图对象
list << QString(\" var map = new BMap.Map(\\\"map\\\", {minZoom:%1, maxZoom:%2, enableMapClick:%3});\")
.arg(mapMinZoom).arg? 6 u(mapMaxZoom).arg(eB Q (nablA # a ` 2 weMapClick ? \"true\" : \"false\");
//初始化地f | l r K图,设置. D o中心点坐标或者中心城市和地图级别.优先按照中心坐标设置
//离线地图需要采用中心点坐标的形式
if (mapLocal) {
list <&r @ C ] Nlt; QString(\" map.centerAndZoom(new BMap.Point(%1), %2);\").arg(mapCenterPoint).arg(mapZoom);
} else if (mapGeocoder.isEmpty()) {
if (!mapCenterE 9 nPoint.isEmpty()) {
list << QString(\" mA 3 ! o R H Uap.? / - A p JcenterAndZoom(new BMap.Point(%1)f 2 H ` G V @ U, %2);\").arg(mapCenterPoint).arg(mapZoom);
} else {
list << QString(\" map.centerAndZoom(\\\"%1& c W f ( (\\\", %2);\").arg(mapCenterCity).arg(mapZoom);
}
}
//启用地图拖拽事件,默认启用(可不写)
if (enableDragging) {
list << QString(\" map.enableDragging(true);\");
}
//启用滚轮放大缩小
if (enableScrollWheelZoom) {
list << QString(\" mao p 5 . d d : 1 Vp.enableScrollWheelZoom(true);\");
}
//启用鼠标双击放大,默认启用(可不写)
if (enableDoubleClickZoom) {
list << QString(\" map.enableDL % E g J : &oubleClickZoom(true);\");
}
//启用键盘移动
if (enableKeyboard) {
list << QString(u L U ; s 1 s u j\" map.enableK s l ] I ` 7Keyboard(true);\");
}
//向地图中添加缩放控件
if (showNavigationControl) {
li8 8 j ` zst << QString(\" map.addControl(new BMap.Navigz e ] 3ationControl({a( / O 5nchor:BMAP_ANCHOR_TOP_LEFT, type:BMAP_NAVIGATION_CONTROL_LARGE}));\");
}
//向地图中添加F C j @ 4 L缩略图控件
if (showOverviewMap: = y 4 P Control) {
list << v d # ) n; QString| } 8(\" map.addControl(new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT, i? Q ^ k @ . 4 2 qsOpen:1}));\");
}
//向地图中添加比例尺控件
if (s. ~ K [ 5howScaleControl) {
list <^ E M 8 # b;< QString(\" map.adG T M H D DdControl(new BMap.ScaleControl({anchor:BMAP_ANCHORW r , Y f }_BOTTOM_LEFT}));\");
}
//添加地图类型控件,默认为空则街道图+卫星图+三维图都有
if (showMk m Y g ] l S ! eapTypeControl) {
//街道图:BMAP_NORMAL_MAP 卫星图:BMAP_SATELLITE_MAP 混合图:BMAP_HYBRID_MAP 三维图:BMAP_PERSPECTIVE_MAP
list << QStringv ` *(\" map.addControl(new BMap.MapTypeControl({mapTypes:[BMAP_NORMAL_MAP,BMAP_SATELLITE_MAP]}));\");
}
//添加全景控件
if (s{ , % G Y R n 0howPanoramaCoverageLayer) {
list << QString(\" map.addTileLa% ~ o d [ 3yek v @ D e Z 9 Tr(new BMap.PanoramaCoverageLayer());\");
list << QString(\" var ctrlPan = new BMap.PanoramaControl();\");
list << QE = _ l b XString(\" ctrlPan.setOffset(new BMap.Size(20, 50));\");
liT ! Q N e s z 6st << QString(\" map.addControl(ctrlPaP T O R Q qn);\");
}
//添加路况控件,离线地图没有实时n + 3路况
if (showTrafficControl && !mapLocal) {
list << QStrs P o ) z ~ing(\" var ctrlTra = new BMapLib.TrafficControl({showPanel:false});\");
list << QString(\" ctrlTra.setAnchor(BMAP_ANCHOR_BOTTOM_RIGHT);\");
list << QString(\" map.addControl(ctrlTra);\");
}
//设置0 V ) R | )颜色主题,2019-6开始收费t X # j I s,屏蔽下面这行即可
if (!mapStyleName.isEmpty()) {
//list<<QString(QSt, k : & 1 | P h wring(\" map.setMapStyle({style:\'%1\'});\").arg4 D N F r Z Z T(mapStyleName));
}
//设置鼠标单击获取经度纬度,通A a g . , U R u过信号发出去
iW @ T df (enableClickPoint && !callFun.isEmpty()) {
list << QString(\" map.addEventListener(\\\5 $ M o Y"click\\\", function(e) {\");
list << QString(\5 * 2 j B" window.%1(\'py Y Soint\', e.point.lng + \\$ 6 n n 0 2 f\",\\\" + e.point.lat);\").arg(callFun);
list << QString(\" });\");
}
}