本文主要介绍百度地图的自定义用法,比如创建地图、添加标注点、添加路径轨迹等问题不在本文讨论范围,请点击百度地图开放平台。本文属于本人原创,如需转载,请注明出处。如本文有说明错误或者不足的地方,还望指出,共同进步。
本文主要讲解的内容有:
1.添加自定义标注
2.添加标注点气泡
3.设定百度地图适当的显示范围
4.点击标注点气泡弹出并居中显示
5.轨迹添加纹理图片
6.添加标注点聚合功能
1.添加自定义的标注
需求1
在项目中,需要显示的标注不只有图片,有时也会有文字提示,此时就需要自定义标注。寻找解决方法:
第一步:进入百度地图官方API中查找,是否可以添加自定义的view,很遗憾,没有,只能设置图片。
第二步:自定义的视图,通过以下方法转换为image,然后赋值给image。
注意:添加自定义的标注点,需要设置标注的中心偏移;不然,在地图放大缩小时,标注点的定点会跟随移动。
上面的方法是在百度地图的回调方法-(BMKAnnotationView*)mapView:(BMKMapView*)mapView viewForAnnotation:(id)annotation中实现。
需求2
当在地图上的标注点超过2个时,如何区分开。此时创建自定义的标注点继承于BMKPointAnnotation,在内部添加需要的属性或者方法,然后在百度地图标注视图回调方法中实现相应的功能。
2.添加标注点自定义气泡
(1)项目中,遇到要点击标注点弹出气泡视图,显示这个标注点的详细信息。需要在添加标注点时设置title的值,自定义气泡视图,title值可以随便赋值。
(2)在百度地图BMKAnnotationView中寻找可以添加气泡视图的属性,找到paopaoView,嗯,命名很别致。
接下来,自定义需要显示的气泡视图,创建自定义气泡视图对象,然后赋值给paopaoView就ok了。
注意:如果遇到标注点是自定义的(比如显示车辆的图标和车牌号),点击标注点弹出的气泡显示位置是以标注点x轴的中心对齐,如果需要显示在其他位置,则需要设置气泡的偏移量。
3.设定百度地图适当的显示范围
下面要讲的才是重点,直接上代码,这里展示的是我自己的思路,如果有不妥或者更好的方法,欢迎指正。
需求是,需要在地图上添加一组标注点,并以合适的缩放比例,将全部的标注点全部显示在地图可视范围内。通过查找百度地图的官方API,找到如下方法。
实现思路为:遍历所有标注点的经纬度值,找出其中最大和最小的经度和纬度值。相当于在地图上画一个矩形,需要确定矩形的起始点和宽高,这里是以经纬度来计算。方法如下
好像上面的方法完美解决,拿衣服!如果遇到如下的需求。需要在地图上显示车辆的位置,并显示车辆的运行状态和车牌号,由于自定义的标注点是以车辆的底部为定点(如下图车辆显示定点),右边的车牌将不会显示在地图的可视范围内,这是因为,在显示Region时,以经纬度计算,刚好在最边上的标注点将会显示贴边显示。
如果可以设置地图的上下左右的预留位置,就可以解决这个问题,接着看官方API,找到可以设置预留边界的方法。如下
如果使用下面的方法,也可以实现效果,不过,会出现,设置了气泡的显示范围(第四个将会讲解),点击标注点显示气泡时,气泡会产生偏移,这个偏移值与屏幕尺寸之间的关系目前还没有找到。(不推荐使用)
看到需要传入一个BMKMapRect,看到注释,直角地理坐标,这是什么鬼?然后无奈去百度,解释的太专业,果断放弃,还有没其他的方法?
在覆盖物的基类中找到有这个属性。思路为添加一段轨迹线,获取到轨迹线的boundingMapRect,然后赋值。方法为: BMKPolyline*polyline = [BMKPolylinepolylineWithCoordinates:coordscount:count]; 完美解决问题。
4.点击标注点气泡弹出并居中显示
最后这个问题,思路与上一个类似,具体的实现方法如下:
点击标注点显示自定义气泡时,气泡不会居中显示在地图上,这就尴尬了!继续查找官方API。看到下面的方法,灵光一现,气泡就是一个视图,已知气泡的宽度和高度,需要求出气泡的起点。
已知点击的标志点的经纬度值,求出这个点在地图上的视图坐标点,示意图如下
已知条件 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方法,具体实现如下:
6.添加标注点聚合功能
从百度开放平台上下载示例demo,里面有开源的聚合算法。将其中的文件拷贝到项目中即可。
进入MapDemo/ClusterDemoViewController中,核心代码如下:
如果觉得可以,给个赞,谢谢!
下一篇将会讲解google地图的一些用法。