百度地图 Annoation 定制

简单介绍在工作中用到的一些定制annoation方法

1.动画型

利用UIImageView startAnimating 这一属性可以让地图上的标注产生动画效果

//先将将BMKAnnotationView重写把annotationImageView作为属性
- (id)initWithAnnotation:(id<BMKAnnotation>)annotation reuseIdentifier:(NSString *)reuseIdentifier {
    self = [super initWithAnnotation:annotation reuseIdentifier:reuseIdentifier];
    if (self) {
        //此处可以定制Annotion
        [self setBounds:CGRectMake(0.f, 0.f, 30.f, 30.f)];

        _annotationImageView = [[UIImageView alloc] initWithFrame:CGRectMake(37.5, 40, 25, 25)];
        _annotationImageView.contentMode = UIViewContentModeScaleAspectFit;

    }
    return self;
}

//AnnotationImages作为属性并调用set方法传入数组
- (void)setAnnotationImages:(NSMutableArray *)images {
    _annotationImages = images;
    [self updateImageView];
}
//调用imageview属性开始动画
- (void)updateImageView {
    if ([_annotationImageView isAnimating]) {
        [_annotationImageView stopAnimating];
    }
    _annotationImageView.animationImages = _annotationImages;
    _annotationImageView.animationDuration = 0.5 * [_annotationImages count];
    _annotationImageView.animationRepeatCount = 0;
    [_annotationImageView startAnimating];
}

地图上添加代码

- (BMKAnnotationView *)mapView:(BMKMapView *)mapView viewForAnnotation:(id <BMKAnnotation>)annotation{

MyAnimatedAnnotationView *annotationView = nil;
        if (annotationView == nil) {
            annotationView = [[MyAnimatedAnnotationView alloc] initWithAnnotation:annotation reuseIdentifier:AnnotationViewID2];
            annotationView.canShowCallout = NO;
        }
        NSMutableArray *images = [NSMutableArray array];
        for (int i = 0; i < 4; i++) {
            UIImage *image = [UIImage imageNamed:[NSString stringWithFormat:@"图片%d",i]];
            [images addObject:image];
        }
        annotationView.annotationImages = images;
        return annotationView;
}

未命名.gif

2.定制一个PopView

地图DTMB:FM.png

图片圆角设置时通常会设置 cornerRadius 属性
其本质为 两条相交的直线以cornerRadius为半径的内切圆的弧线段

图中中间部分的4个圆角可以用UIBezierPath进行某个位置的圆角裁剪


    UIBezierPath * maskPath = [UIBezierPath bezierPathWithRoundedRect:self.bounds byRoundingCorners:(UIRectCornerBottomLeft | UIRectCornerBottomRight)cornerRadii:CGSizeMake(5, 5)];
    CAShapeLayer *maskLayer = [[CAShapeLayer alloc] init];
    maskLayer.frame = self.bounds;
    maskLayer.path = maskPath.CGPath;
    self.layer.mask = maskLayer;

本例中白色三角形覆盖了灰色阴影三角形一般绘制在CAShapeLayer一层,在UIView的最底部,如果圆角利用UIView的属性来做必然会遮挡住三角形,所以阴影也应该会制在CAShapeLayer一层

//在定制UIView的drawRect方法里绘图
- (void)drawRect:(CGRect)rect

{
    [self drawShadow];
    [self drawTriangle];

}
- (void)drawTriangle{

    CGMutablePathRef pathRef1 = CGPathCreateMutable();
    CGFloat location = self.frame.origin.x + self.frame.size.width/2;
    CGPathMoveToPoint(pathRef1, nil, location+10, self.frame.origin.y +self.frame.size.height -TriangleHeight);
    CGPathAddLineToPoint(pathRef1, nil, location -2, self.frame.origin.y +self.frame.size.height);
    CGPathAddLineToPoint(pathRef1, nil, location, self.frame.origin.y +self.frame.size.height -TriangleHeight);
    CGPathAddLineToPoint(pathRef1, nil, location+10, self.frame.origin.y +self.frame.size.height -TriangleHeight);
    CGPathCloseSubpath(pathRef1);
    
    CAShapeLayer *layer1 = [[CAShapeLayer alloc] init];
    layer1.path = pathRef1;
    layer1.strokeColor = [UIColor whiteColor].CGColor;
    layer1.fillColor   = [UIColor whiteColor].CGColor;
    [self.layer insertSublayer:layer1 atIndex:1];
    CGPathRelease(pathRef1);
}
- (void)drawShadow{
   
    CGMutablePathRef pathRef = CGPathCreateMutable();
    CGRect bounds = CGRectInset(self.bounds, 0, 0);
    CGFloat cornerRadius = 5.f;

    //绘制偏移的阴影层，四个角为曲线
    
    CGPathMoveToPoint(pathRef, nil, CGRectGetMinX(bounds)+cornerRadius, CGRectGetMaxY(bounds)-cornerRadius);
    CGPathAddArcToPoint(pathRef, nil, CGRectGetMinX(bounds)+cornerRadius, CGRectGetMinY(bounds)+cornerRadius, CGRectGetMidX(bounds), CGRectGetMinY(bounds)+cornerRadius, cornerRadius);
    CGPathAddArcToPoint(pathRef, nil, CGRectGetMaxX(bounds)-cornerRadius, CGRectGetMinY(bounds)+cornerRadius, CGRectGetMaxX(bounds)-cornerRadius, CGRectGetMidY(bounds)+cornerRadius, cornerRadius);
    CGPathAddArcToPoint(pathRef, nil, CGRectGetMaxX(bounds)-cornerRadius, CGRectGetMaxY(bounds)-cornerRadius, CGRectGetMidX(bounds), CGRectGetMaxY(bounds)-cornerRadius, cornerRadius);
    CGPathAddArcToPoint(pathRef, nil, CGRectGetMinX(bounds)+cornerRadius, CGRectGetMaxY(bounds)-cornerRadius, CGRectGetMinX(bounds)+cornerRadius, CGRectGetMidY(bounds)+cornerRadius, cornerRadius);

    CAShapeLayer *layer = [[CAShapeLayer alloc] init];
    layer.path = pathRef;
    layer.strokeColor = [UIColor clearColor].CGColor;
    layer.fillColor   = [UIColor colorWithRed:0 green:0 blue:0 alpha:0.3].CGColor;
    [self.layer insertSublayer:layer atIndex:0];
    CGPathRelease(pathRef);
}

百度地图 Annoation 定制

1.动画型

2.定制一个PopView

推荐阅读更多精彩内容