高德地图（百度地图，Google地图）中自定义Annotation&CallOutView

本篇介绍如何在高德地图中自定义Annotation的CallOutView

本文最后会附上App的Github地址。

之前在网上看到一篇百度地图的自定义CallOutView的方法，但是应用在高德上，一直出现这样那样的问题，下面介绍一种方法，非常的简单，因为官方Demo中已经将自定义方法告诉大家了。

废话不多说，直接上一张自定义后的截图

下面介绍用高德地图如果来做，百度地图和Google地图方法类似

1.将官方Demo中得文件拷贝到自己的项目中

CustomeAnnotationView和CustomCalloutView是对应地图中的地标和弹出框

这里简答介绍一下原理，这两个view其实是绑定在一个coordinate（坐标）上的，只是在点击时，才显示calloutView。

2.深入了解这两个view

下面这个是CustomeAnnotationView中得部分代码，也是自定义CalloutView的部分，中间注释部分就是需要自定义的代码段

- (void)setSelected:(BOOL)selected animated:(BOOL)animated{    if (self.selected == selected)    {        return;    }        if (selected)    {        if (self.calloutView == nil)        {            /* Construct custom callout. */            self.calloutView = [[CustomCalloutView alloc] initWithFrame:CGRectMake(0, 0, kCalloutWidth, kCalloutHeight)];            self.calloutView.center = CGPointMake(CGRectGetWidth(self.bounds) / 2.f + self.calloutOffset.x,                                                  -CGRectGetHeight(self.calloutView.bounds) / 2.f + self.calloutOffset.y); }        //add view to calloutView将需要添加的label，button等view add到calloutView上。        [self addSubview:self.calloutView];}    else    {        [self.calloutView removeFromSuperview];    }        [super setSelected:selected animated:animated];}

上面说了自定义calloutView的关键代码段，下面介绍下自定义annotation的代码段

该段代码是在调用地图时使用的，是MAMapView的delegate方法

//customer annotation- (MAAnnotationView *)mapView:(MAMapView *)mapView viewForAnnotation:(id<MAAnnotation>)annotation{    if ([annotation isKindOfClass:[MAPointAnnotation class]])    {        static NSString *customReuseIndetifier = @"customReuseIndetifier";                CustomAnnotationView *annotationView = (CustomAnnotationView*)[mapView dequeueReusableAnnotationViewWithIdentifier:customReuseIndetifier];                if (annotationView == nil)        {            annotationView = [[CustomAnnotationView alloc] initWithAnnotation:annotation reuseIdentifier:customReuseIndetifier];            // must set to NO, so we can show the custom callout view.            annotationView.canShowCallout = NO;   //注意这个地方一定要设置成NO，不然就是Callout出系统的calloutview。            annotationView.draggable = YES;            annotationView.calloutOffset = CGPointMake(0, -5);        }               annotationView.portrait = [UIImage imageNamed:@"write_p.png"]; //这个是annotation的image，可以在这里进行设置        }              return annotationView;    }        return nil;}

下面这部分代码基本不需要做改变，它的主要功能是设置calloutView显示位置等。

- (void)mapView:(MAMapView *)mapView didSelectAnnotationView:(MAAnnotationView *)view{    /* Adjust the map center in order to show the callout view completely. */    if ([view isKindOfClass:[CustomAnnotationView class]]) {        CustomAnnotationView *cusView = (CustomAnnotationView *)view;        CGRect frame = [cusView convertRect:cusView.calloutView.frame toView:self.mapView];                frame = UIEdgeInsetsInsetRect(frame, UIEdgeInsetsMake(kCalloutViewMargin, kCalloutViewMargin, kCalloutViewMargin, kCalloutViewMargin));                if (!CGRectContainsRect(self.mapView.frame, frame))        {            /* Calculate the offset to make the callout view show up. */            CGSize offset = [self offsetToContainRect:frame inRect:self.mapView.frame];                        CGPoint theCenter = self.mapView.center;            theCenter = CGPointMake(theCenter.x - offset.width, theCenter.y - offset.height);                        CLLocationCoordinate2D coordinate = [self.mapView convertPoint:theCenter toCoordinateFromView:self.mapView];                        [self.mapView setCenterCoordinate:coordinate animated:YES];        }                    }}

CsutomeCalloutView文件中，设置了CalloutView的背景色，形状等，一般也不需要修改。
我在该项目中，只是对背景色进行的修改。

3.小结

本教程非常简单，稍微仔细看看官方的Demo就会知道该如何去做。

该项目中，我还根据每个annotation的不同状态显示不同的image，包括CalloutView里的button处理事件等。

点击这里获取App的源码

如果有任何问题欢迎再下面留言，或者扫描二维码