美文网首页
百度地图 Annoation 定制

百度地图 Annoation 定制

作者: Django_Monstar | 来源:发表于2017-08-23 17:41 被阅读38次

    简单介绍在工作中用到的一些定制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 定制

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