高仿美团<四>

粉友们我又回来了。国庆回莆田老家几天没有coding就感觉手痒＋满满的罪恶感。这个我里我想对所有的简友(尤其是"只因我为足球而生")和我自己说声抱歉。在高仿美团三里面就说要把github地址贴出来。然后一直拖延到现在。优秀是一种习惯。很明显我还需努力。这段时间我想了好多好多。什么都想做什么都止步不前。这篇最想和大家共勉的一句是：

相信自己。专注一点，再专注一点，你离成功就会更近一点。

话不多说了上效果了：

自定义气泡

机上一个版本说我会独立出来讲下这个东东，觉得在这里说下也很合适
首先抛开项目不谈：
一步一步来怎么画这个气泡的呢？

1.自定义气泡
2.自定义标注

屏幕快照 2015-10-07 21.25.30.png

很明显他是一个view，所有就自定义一个view然后继承于UIView
代码如下：

- (void)drawRect:(CGRect)rect {
    [self drawInContext:UIGraphicsGetCurrentContext()];
    
    self.layer.shadowColor = [[UIColor clearColor] CGColor];
    self.layer.shadowOpacity = 1.0;
    self.layer.shadowOffset = CGSizeMake(0.0f, 0.0f);

}

-(void)drawInContext:(CGContextRef)context{
    //设置当前图形的宽度
    CGContextSetLineWidth(context, 2.0);
    //填充泡泡颜色并设置透明度
   // CGContextSetFillColorWithColor(context, [UIColor colorWithRed:0.3 green:0.3 blue:0.3 alpha:0.8].CGColor);
    //填充的颜色
    CGContextSetFillColorWithColor(context, [UIColor redColor].CGColor);

    //
    [self getDrawPath:context];

    //填充形状内的颜色
    CGContextFillPath(context);
}
//  200, 70
-(void)getDrawPath:(CGContextRef)context{
    //取出当前的图形大小
    CGRect rrect = self.bounds;
    NSLog(@"%f", self.frame.size.width);
    NSLog(@"%f", self.frame.size.height);

    //设置园弧度
    CGFloat radius = 30.0;
    
    CGFloat minx = CGRectGetMinX(rrect),//0
    //中点
    midx = CGRectGetMidX(rrect),//100
    //最大的宽度的X
    maxx = CGRectGetMaxX(rrect);//200
    CGFloat miny = CGRectGetMinY(rrect),//0
    //最大的高度Y
    maxy = CGRectGetMaxY(rrect)-kArrorHeight;//60
    
    //1.画向下的三角形
    //2.设置起点三角形的右边点为起点
    CGContextMoveToPoint(context, midx+kArrorHeight, maxy);
    //3.连线 右边点  －>连最下面上下面的点
    CGContextAddLineToPoint(context, midx, maxy+kArrorHeight);//画直线
    //4.最下面的点连上  最左边的点。
    CGContextAddLineToPoint(context, midx-kArrorHeight, maxy);
    
    //画4个圆弧
    //    CGContextAddArcToPoint(context, x1, y1, x2, y2, CGfloat radius );//画完后 current point不在minx,miny，而是在圆弧结束的地方

    CGContextAddArcToPoint(context, minx, maxy, minx, miny, radius);//画完后 current point不在minx,miny，而是在圆弧结束的地方
    CGContextAddArcToPoint(context, minx, miny, maxx, miny, radius);
    CGContextAddArcToPoint(context, maxx, miny, maxx, maxy, radius);
    CGContextAddArcToPoint(context, maxx, maxy, midx, maxy, radius);
    CGContextClosePath(context);
}

注释已经很清楚了。
自定义气泡已经有了接下来就自定义标注。

百度原始的标注效果图

/**
 *  通过mapView快速创建一个annotationView
 */
+(instancetype)annotationViewWithMapView:(BMKMapView *)mapView viewForAnnotation:(id <BMKAnnotation>)annotation
{
    if ([annotation isKindOfClass:[BMKPointAnnotation class]])
    {
        static NSString *reuseIndetifier = @"annotationReuseIndetifier";
        JFAnnotationView *annotationView = (JFAnnotationView*)[mapView dequeueReusableAnnotationViewWithIdentifier:reuseIndetifier];
        if (annotationView == nil)
        {
            annotationView = [[JFAnnotationView alloc] initWithAnnotation:annotation reuseIdentifier:reuseIndetifier];
        }
        if ([annotation isKindOfClass:[JFAnnotation class]]){
            annotationView.jfannotation = (JFAnnotation *)annotation;
        }
        annotationView.canShowCallout = NO;
     ###只要只需这一句是不是很easy 
   annotationView.image = [UIImage imageNamed:@"icon_map_cateid_1"];

        // 设置中⼼心点偏移,使得标注底部中间点成为经纬度对应点
        
        // annotationView.centerOffset = CGPointMake(0, -18);
        return annotationView;
    }
    return nil;
}

那么标注和气泡怎么关联在一起？

-(void)setSelected:(BOOL)selected animated:(BOOL)animated{

    if (self.selected == selected) {
        return;
    }
    if (selected) {
        if (self.calloutView == nil) {
            self.calloutView = [[JFCalloutView alloc] initWithFrame:CGRectMake(0, 0, kCalloutWidth, kCalloutHeight)];
            
            self.calloutView.center = CGPointMake(CGRectGetWidth(self.bounds) / 2.f + self.calloutOffset.x,-CGRectGetHeight(self.calloutView.bounds) / 2.f + self.calloutOffset.y);
        }
        NSString *imgUrl = [self.jfannotation.jfModel.imgurl stringByReplacingOccurrencesOfString:@"w.h" withString:@"104.63"];
        [self.calloutView.imageView sd_setImageWithURL:[NSURL URLWithString:imgUrl] placeholderImage:[UIImage imageNamed:@"bg_customReview_image_default"]];
        self.calloutView.title = self.annotation.title;
        self.calloutView.subtitle = self.annotation.subtitle;
        [self addSubview:self.calloutView];
    }else{
        [self.calloutView removeFromSuperview];
    }
    [super setSelected:selected animated:animated];
    
}

在自定义气泡的view里面加你想加的控件，数据等等。
然后在自定义的annotation模型里面依次添加这些属性。
具体看我源码里面已经很清楚里，如果还是有问题的可以提出来我们一起coding.

我的.gif

这两个界面也是webview

高仿美团四就到这里了，本项目继续更新中。。。

源码链接：https://github.com/tubie/JFMeiTuan

屏幕快照 2015-10-08 08.55.27.png

有问题可以提出来我很乐意和大家一起分享。喜欢的话给我一个小星星我会很开心的。同时也希望你能够继续关注我。