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地图的一些用法。

你可能感兴趣的:(iOS 百度地图的高级用法)