ios 百度地图自定义地图弹出框(CalloutView)

前言

自己之前没怎么用过地图，这两天自己来使用地图，研究了下大头针的弹出框，一开始觉得很蛋疼，后来看看别人的代码和博客，也差不多，主要大家要理解原理！

在ios上边使用地图库的同学肯定遇到过这样的问题：弹出框只能设置title和subtitle和左右的view，不管是百度地图还是高德地图还是自带的google地图，只提供了这四个属性，如果想添加更多的view，只能自定义。可是，类库只能看到.h文件，.m都看不到，这让新手比较蛋疼，庞大的地图类库一时半会摸不着头脑，从头再学还需要时间，本文就教大家快速制作一个属于自己的 CalloutView！等你一步一步调通后，再回过头来使用系统自带的方法设置callout，就会领悟这个过程。这里也很多是从别人那里学来的，大家相互学习，资源共享，分享技术！

Step1

创建demo，并添加百度地图的静态类库，helloword能显示mapview

关于这一步我专门写了教程，这里就不再赘述，同样，关于如何使用自带的BMKPointAnnotation添加一个marker，我也不再说了，如果连这个你都不会，那么先去官网看一下基本教程。

Step2

实现三个委托方法：

这个方法类似tableview添加cell，都是创建annotation

#pragma mark --
#pragma mark --根据anntation生成对应的View
// 根据anntation生成对应的View
- (BMKAnnotationView *)mapView:(BMKMapView *)mapView viewForAnnotation:(id <BMKAnnotation>)annotation

这个方法在点击地图marker时所触发（并显示callout）

#pragma mark--当点击annotation views时，调用此接口
//点击大头针
-(void)mapView:(BMKMapView *)mapView didSelectAnnotationView:(BMKAnnotationView *)view
{
  

这个方法在点击地图任意位置，相当于隐藏callout

#pragma mark--取消选中一个annotation views时，调用此接口
- (void)mapView:(BMKMapView *)mapView didDeselectAnnotationView:(BMKAnnotationView *)view
{
  

原理：地图上的marker是在viewForAnnoation里创建的，同时也会隐含的为我们创建一个CalloutView，就是自带的吹出框，只是我们看不到源码。其实这个吹出框(CalloutView)也是一个annotation，也会在viewForAnnotation里被创建，他的坐标应该和这个点的marker坐标一样，只要明白了这一点，就行了， marker和吹出框是两个不同的annotation，他们有同样的coordinate 。

Step3

自定义一个Annotation，为了简单方便，我就直接继承了mapview自带的BMKPointAnnotation，这是一个经典的图钉marker。

在这里我添加了一个Dictionary属性，目的是为了自定义的CalloutView弹出框显示内容赋值，一会就明白了。

Step4

添加自定义Annotation到mapview

//添加自定义Annotation  
 CLLocationCoordinate2D center = {39.91669,116.39716};  
  
CustomPointAnnotation *pointAnnotation = [[CustomPointAnnotation alloc] init];  
pointAnnotation.title = @"我是中国人";//因为继承了BMKPointAnnotation，所以这些title,subtitle都可以设置  
pointAnnotation.subtitle = @"我爱自己的祖国";  
  
pointAnnotation.coordinate = center;  
[mymapview addAnnotation:pointAnnotation];

在viewForanntion里，由于我对marker没太大要求，直接使用了 BMKPinAnnotationView(图钉),简单设置image属性为自己需要的图标，如下所示：