iOS 百度地图的高级用法

本文主要介绍百度地图的自定义用法,比如创建地图、添加标注点、添加路径轨迹等问题不在本文讨论范围,请点击百度地图开放平台。本文属于本人原创,如需转载,请注明出处。如本文有说明错误或者不足的地方,还望指出,共同进步。

本文主要讲解的内容有:

1.添加自定义标注

2.添加标注点气泡

3.设定百度地图适当的显示范围

4.点击标注点气泡弹出并居中显示

5.轨迹添加纹理图片

6.添加标注点聚合功能


1.添加自定义的标注

需求1 

在项目中,需要显示的标注不只有图片,有时也会有文字提示,此时就需要自定义标注。寻找解决方法:

第一步:进入百度地图官方API中查找,是否可以添加自定义的view,很遗憾,没有,只能设置图片。

标注点添加显示图片

第二步:自定义的视图,通过以下方法转换为image,然后赋值给image。

视图转为image方法

注意:添加自定义的标注点,需要设置标注的中心偏移;不然,在地图放大缩小时,标注点的定点会跟随移动。

设置标注点偏移

上面的方法是在百度地图的回调方法-(BMKAnnotationView*)mapView:(BMKMapView*)mapView viewForAnnotation:(id)annotation中实现。


需求2

当在地图上的标注点超过2个时,如何区分开。此时创建自定义的标注点继承于BMKPointAnnotation,在内部添加需要的属性或者方法,然后在百度地图标注视图回调方法中实现相应的功能。

继承BMKPointAnnotation
地图回调方法

2.添加标注点自定义气泡

(1)项目中,遇到要点击标注点弹出气泡视图,显示这个标注点的详细信息。需要在添加标注点时设置title的值,自定义气泡视图,title值可以随便赋值。

设置标注点气泡标题

(2)在百度地图BMKAnnotationView中寻找可以添加气泡视图的属性,找到paopaoView,嗯,命名很别致。

标注点气泡视图

接下来,自定义需要显示的气泡视图,创建自定义气泡视图对象,然后赋值给paopaoView就ok了。

自定义气泡视图初始化
气泡视图赋值

注意:如果遇到标注点是自定义的(比如显示车辆的图标和车牌号),点击标注点弹出的气泡显示位置是以标注点x轴的中心对齐,如果需要显示在其他位置,则需要设置气泡的偏移量。

气泡视图偏移量

3.设定百度地图适当的显示范围

下面要讲的才是重点,直接上代码,这里展示的是我自己的思路,如果有不妥或者更好的方法,欢迎指正。

需求是,需要在地图上添加一组标注点,并以合适的缩放比例,将全部的标注点全部显示在地图可视范围内。通过查找百度地图的官方API,找到如下方法。

显示地图的显示范围
百度地图经纬度区域
百度地图经纬度范围

实现思路为:遍历所有标注点的经纬度值,找出其中最大和最小的经度和纬度值。相当于在地图上画一个矩形,需要确定矩形的起始点和宽高,这里是以经纬度来计算。方法如下

计算出显示范围
找出最大最小经纬度值

好像上面的方法完美解决,拿衣服!如果遇到如下的需求。需要在地图上显示车辆的位置,并显示车辆的运行状态和车牌号,由于自定义的标注点是以车辆的底部为定点(如下图车辆显示定点),右边的车牌将不会显示在地图的可视范围内,这是因为,在显示Region时,以经纬度计算,刚好在最边上的标注点将会显示贴边显示。

车辆显示定点
显示车辆和车牌

如果可以设置地图的上下左右的预留位置,就可以解决这个问题,接着看官方API,找到可以设置预留边界的方法。如下

显示地图范围

如果使用下面的方法,也可以实现效果,不过,会出现,设置了气泡的显示范围(第四个将会讲解),点击标注点显示气泡时,气泡会产生偏移,这个偏移值与屏幕尺寸之间的关系目前还没有找到。(不推荐使用)

填充地图显示范围

看到需要传入一个BMKMapRect,看到注释,直角地理坐标,这是什么鬼?然后无奈去百度,解释的太专业,果断放弃,还有没其他的方法?

地图的直角地理坐标

在覆盖物的基类中找到有这个属性。思路为添加一段轨迹线,获取到轨迹线的boundingMapRect,然后赋值。方法为: BMKPolyline*polyline = [BMKPolylinepolylineWithCoordinates:coordscount:count];  完美解决问题。

覆盖物基类

4.点击标注点气泡弹出并居中显示

最后这个问题,思路与上一个类似,具体的实现方法如下:

点击标注点显示自定义气泡时,气泡不会居中显示在地图上,这就尴尬了!继续查找官方API。看到下面的方法,灵光一现,气泡就是一个视图,已知气泡的宽度和高度,需要求出气泡的起点。

将视图rect转换为地图regio
经纬度转换为视图坐标
设置地图的显示范围

已知点击的标志点的经纬度值,求出这个点在地图上的视图坐标点,示意图如下

已知条件 Map H(地图视图的高度)   Map W(地图视图的宽度)  P(标注点的开始位置) bubbleWidth(气泡的宽度) bubbleHeight(气泡的高度)

求出  P2(居中显示的标注点)O1(气泡的开始起点)  O2(气泡居中显示的起始点)

第一步:通过百度地图API求出P的视图坐标

第二步:求出O1起点的坐标  O1.x = P.x-bubbleWidth/2;  O1.y = P.x-bubbleHeight;

第三步:通过百度地图API将气泡视图rect转换为BMKCoordinateRegion,然后设置地图的显示范围。

手绘的示意图

最后的实现代码如下

代码实现

5.轨迹添加纹理图片

公司的项目中,查询车辆的历史轨迹时,需要标明车辆的运行方向。之前的做法是添加方向标注点,但这样的效果不是很好,用纹理图片就完美的解决问题。

添加纹理图片时,需要注意两点:一是纹理图片的方向尖头必须朝下;二是纹理图片的尺寸必须为2的n次方幂。

绘制轨迹线的回调方法

在绘制轨迹线的回调方法时,需要自定义BMKPolyLineView,重写glRender方法,具体实现如下:

重写glRender方法

6.添加标注点聚合功能

从百度开放平台上下载示例demo,里面有开源的聚合算法。将其中的文件拷贝到项目中即可。

demo目录

进入MapDemo/ClusterDemoViewController中,核心代码如下:

更新聚合状态

如果觉得可以,给个赞,谢谢!

下一篇将会讲解google地图的一些用法。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 205,386评论 6 479
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,939评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,851评论 0 341
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,953评论 1 278
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,971评论 5 369
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,784评论 1 283
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,126评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,765评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,148评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,744评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,858评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,479评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,080评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,053评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,278评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,245评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,590评论 2 343

推荐阅读更多精彩内容

  • 内容抽屉菜单ListViewWebViewSwitchButton按钮点赞按钮进度条TabLayout图标下拉刷新...
    皇小弟阅读 46,708评论 22 664
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,019评论 4 62
  • 还是有悬而未决的事,还是有许多想了又想不知如何是好的事还是不能全力与爱的人恣意前行... 有时候会觉得“一地鸡毛”...
    mo清夜无尘阅读 75评论 0 1
  • 昨天真是奇妙的一天,中午进门时无意识的将钥匙插在门上,等我有事要出去时又惯性的把保险栓一拉,只听见清脆的啪的一声,...
    虞七七阅读 389评论 2 6
  • 作业:【一阶段·片段二】 R· 阅读原文片段 《商业模式新生代》 1请写下你的目标 例一:我的目标是在工作表现中领...
    mamaissmiling阅读 188评论 7 1