百度地图自定义锚点，自定义泡泡View

案例图片-锚点.png

首先这是真实项目中的简单案例，锚点图片自定义，锚点上面带有数字并且锚点右侧需要有文字展示；

由于百度SDK自带锚点BMKAnnotationView展示方式并不符合我们的需求所以需要我们自定义，直接贴代码

@interface JKBAnnotationView : BMKAnnotationView

@property (nonatomic, assign) NSInteger     photoNum;

@property (nonatomic, strong) UILabel       *numLabel;

@end

@interface JKBAnnotationView ()

@end

@implementation JKBAnnotationView

- (id)initWithAnnotation:(id)annotation reuseIdentifier:(NSString *)reuseIdentifier {
    if (self = [super initWithAnnotation:annotation reuseIdentifier:reuseIdentifier]) {
        [self configUI];
    }
    return self;
}

- (void)configUI {

    [self addSubview:self.numLabel];
}

- (void)setPhotoNum:(NSInteger)photoNum {
    if (photoNum > 99) {
        self.numLabel.text = @"99+";
    } else {
        self.numLabel.text = [NSString stringWithFormat:@"%ld",photoNum];
    }
}

#pragma mark - lazy load

- (UILabel *)numLabel {
    if (!_numLabel) {
        _numLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 4, self.width, 14)];
        _numLabel.textColor = [UIColor whiteColor];
        _numLabel.textAlignment = NSTextAlignmentCenter;
        _numLabel.font = [UIFont fontWithName:@"PingFangSC-Regular" size:10];
    }
    return _numLabel;
}

@end

由于项目代码变更，右侧label同理于numLabel，这里不作展示；

-------这就解决了锚点上数字和右侧文字的视图自定义，锚点本身的图片一句话就可以搞定，找到此方法：

- (BMKAnnotationView *)mapView:(BMKMapView *)mapView viewForAnnotation:(id)annotation

修改annotaion即可：

annotationView.image = [UIImage imageNamed:@"你的图片"];

-------这是解决了锚点图片的自定义，那么问题来了

怎么替换系统本身的annotionView样式来展示我们自定义的View呢？视图数据的赋值又是怎么进行的?接下来我们首先解决视图数据赋值的问题:

百度SDK自带的annotion有两个属性,subtitle和title,他可以作为你初始化锚点传值的介质来给我们的'数字'和'右侧文字'赋值,如果你不愿意当然我们可以自定义自己的annotation(继承自BMKPointAnnotation),贴代码:

@interface JKBPointAnnotation : BMKPointAnnotation

@property (nonatomic, copy) NSString *xx;

@property (nonatomic, copy) NSString *xxxx;

@property (nonatomic, copy) NSString *xxxxxx;

@property (nonatomic, copy) NSString *xxxxxxxxxx;

@end

这样我们可以拓展n个属性来适应我们的自定义view >o< >o< 现在展示的view有了，给view赋值的介质有了，但是具体在哪里赋值呢，贴代码：

- (BMKAnnotationView *)mapView:(BMKMapView *)mapView viewForAnnotation:(id)annotation {
    if ([annotation isKindOfClass:[JKBPointAnnotation class]])
       {
           static NSString *reuseIndetifier = @"annotationReuseIndetifier";
           JKBAnnotationView *annotationView = [mapView dequeueReusableAnnotationViewWithIdentifier:reuseIndetifier];
           if (annotationView == nil)
           {
               annotationView = [[JKBAnnotationView alloc] initWithAnnotation:annotation reuseIdentifier:reuseIndetifier];
           }
           annotationView.image = [UIImage imageNamed:@"icon_map"];
           annotationView.photoNum = [annotation.title integerValue];
           return annotationView;
       }
       return nil;
}

给annotationView.photoNum 赋值的时候用了annotation.title,这个title是我用的系统自带的属性，次数可以使用自己自定义的属性，可能需要进行annotation的类型强转，这里自行处理；

这样我们就完成了锚点自定义，接下来给大家介绍paopaoView样式自定义，也就是点击锚点弹出来的视图，上案例：

案例2-泡泡View.png

当我们点击锚点弹出这样一个视图的时候，百度SDK自带的泡泡View并不能满足我们的需求所以还是需要我们自定义样式（继承自UiView就可以），这里省略自定义过程，自定义泡泡View数据源依然使用我们上述使用的自定义annotation即可，赋值代码：

- (BMKAnnotationView *)mapView:(BMKMapView *)mapView viewForAnnotation:(id)annotation {
    if ([annotation isKindOfClass:[JKBPointAnnotation class]])
       {
           static NSString *reuseIndetifier = @"annotationReuseIndetifier";
           JKBAnnotationView *annotationView = [mapView dequeueReusableAnnotationViewWithIdentifier:reuseIndetifier];
           if (annotationView == nil)
           {
               annotationView = [[JKBAnnotationView alloc] initWithAnnotation:annotation reuseIdentifier:reuseIndetifier];
           }
           annotationView.image = [UIImage imageNamed:@"icon_map"];
           annotationView.photoNum = [annotation.title integerValue];
           annotationView.canShowCallout = ((JKBPointAnnotation *)annotation).imageStr.length == 0 ? NO : YES;
           annotationView.numLabel.width = annotationView.width;
           JKBPaoPaoView *customPopView = [[JKBPaoPaoView alloc] init];
           customPopView.frame = CGRectMake(0, 0, 320.0f, 250.0f);
           customPopView.imageStr =((JKBPointAnnotation *)annotation).imageStr;
           customPopView.serviceLocationStr = ((JKBPointAnnotation *)annotation).serviceLocationStr;
           customPopView.servicePeopelStr = ((JKBPointAnnotation *)annotation).servicePeopelStr;
           customPopView.locationStr = ((JKBPointAnnotation *)annotation).locationStr;

           BMKActionPaopaoView *pView = [[BMKActionPaopaoView alloc] initWithCustomView:customPopView];
           pView.layer.masksToBounds = YES;
           pView.layer.cornerRadius = 10;
           pView.backgroundColor = [UIColor whiteColor];
           pView.frame = customPopView.frame;
           annotationView.paopaoView = pView;
           return annotationView;
       }
       return nil;
}

简单粗糙，请勿见怪 0.0

可能还会有朋友们问，自定义的annotation那些属性是怎么拥有值得，这就需要我们在实际请求中从后台获取到位置消息，然后给annotion的属性赋值就好了，当给mapView添加一个annotaion时，便会执行我们的viewForAnnotation代理方法。

结束

（任何问题欢迎下方留言一起探讨！）