高德地图（百度地图，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的源码

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