美文网首页
百度地图自定义锚点,自定义泡泡View

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

作者: Insight_ | 来源:发表于2019-09-29 17:49 被阅读0次
案例图片-锚点.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<BMKAnnotation>)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<BMKAnnotation>)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<BMKAnnotation>)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<BMKAnnotation>)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代理方法。

结束

(任何问题欢迎下方留言一起探讨!)

相关文章

网友评论

      本文标题:百度地图自定义锚点,自定义泡泡View

      本文链接:https://www.haomeiwen.com/subject/accqpctx.html