案例图片-锚点.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代理方法。
结束
(任何问题欢迎下方留言一起探讨!)
网友评论