iOS-百度地图添加标注自定义气泡

原地址：http://www.jianshu.com/p/6a334f071c69

文／煜寒了（简书作者）
原文链接：http://www.jianshu.com/p/6a334f071c69
著作权归作者所有，转载请联系作者获得授权，并标注“简书作者”。

1.首先实现添加多个标注和自定义气泡

添加自定义标注

[_mapView addAnnotations:array];

arry 中放入标注（BMKPointAnnotation）的数组，此方法添加多个标注。

当添加多个标注时就触发以下代理方法

#pragma mark -- BMKMapdelegate/** *根据anntation生成对应的View *@param mapView 地图View *@param annotation 指定的标注 *@return 生成的标注View */-(BMKAnnotationView *)mapView:(BMKMapView *)mapView viewForAnnotation:(id <BMKAnnotation>)annotation{    if ([annotation isKindOfClass:[BMKPointAnnotation class]]) {        BMKPinAnnotationView *newAnnotationView = [[BMKPinAnnotationView alloc]initWithAnnotation:annotation reuseIdentifier:@"myAnnotation"];        newAnnotationView.animatesDrop = YES;        newAnnotationView.annotation = annotation;        //这里我根据自己需要，继承了BMKPointAnnotation，添加了标注的类型等需要的信息        MyBMKPointAnnotation *tt = (MyBMKPointAnnotation *)annotation;        //判断类别，需要添加不同类别，来赋予不同的标注图片        if (tt.profNumber == 100000) {            newAnnotationView.image = [UIImage imageNamed:@"ic_map_mode_category_merchants_normal.png"];        }else if (tt.profNumber == 100001){        }        //设定popView的高度，根据是否含有缩略图        double popViewH = 60;        if (annotation.subtitle == nil) {            popViewH = 38;        }        UIView *popView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, ScreenWidth-100, popViewH)];        popView.backgroundColor = [UIColor whiteColor];        [popView.layer setMasksToBounds:YES];        [popView.layer setCornerRadius:3.0];        popView.alpha = 0.9;//        //设置弹出气泡图片//        UIImageView *image = [[UIImageView alloc]initWithImage:[UIImage imageNamed:tt.imgPath]];//        image.frame = CGRectMake(0, 160, 50, 60);//        [popView addSubview:image];        //自定义气泡的内容，添加子控件在popView上        UILabel *driverName = [[UILabel alloc]initWithFrame:CGRectMake(8, 4, 160, 30)];        driverName.text = annotation.title;        driverName.numberOfLines = 0;        driverName.backgroundColor = [UIColor clearColor];        driverName.font = [UIFont systemFontOfSize:15];        driverName.textColor = [UIColor blackColor];        driverName.textAlignment = NSTextAlignmentLeft;        [popView addSubview:driverName];        UILabel *carName = [[UILabel alloc]initWithFrame:CGRectMake(8, 30, 180, 30)];        carName.text = annotation.subtitle;        carName.backgroundColor = [UIColor clearColor];        carName.font = [UIFont systemFontOfSize:11];        carName.textColor = [UIColor lightGrayColor];        carName.textAlignment = NSTextAlignmentLeft;        [popView addSubview:carName];        if (annotation.subtitle != nil) {        UIButton *searchBn = [[UIButton alloc]initWithFrame:CGRectMake(170, 0, 50, 60)];        [searchBn setTitle:@"查看路线" forState:UIControlStateNormal];        searchBn.backgroundColor = mainColor;            searchBn.titleLabel.numberOfLines = 0;        [searchBn addTarget:self action:@selector(searchLine)];        [popView addSubview:searchBn];        }        BMKActionPaopaoView *pView = [[BMKActionPaopaoView alloc]initWithCustomView:popView];        pView.frame = CGRectMake(0, 0, ScreenWidth-100, popViewH);        ((BMKPinAnnotationView*)newAnnotationView).paopaoView = nil;        ((BMKPinAnnotationView*)newAnnotationView).paopaoView = pView;        return newAnnotationView;    }    return nil;}

点击标注和气泡响应方法

/** * 当选中一个annotation views时，调用此接口 * @param mapView 地图View * @param views 选中的annotation views */- (void)mapView:(BMKMapView *)mapView didSelectAnnotationView:(BMKAnnotationView *)view{    _shopCoor = view.annotation.coordinate;}/** *  选中气泡调用方法 *  @param mapView 地图 *  @param view    annotation */- (void)mapView:(BMKMapView *)mapView annotationViewForBubble:(BMKAnnotationView *)view{    MyBMKPointAnnotation *tt = (MyBMKPointAnnotation *)view.annotation;    if (tt.shopID) {        BusinessIfonUVC *BusinessIfonVC = [[BusinessIfonUVC alloc]init];        BusinessIfonVC.shopId = tt.shopID;        [self.navigationController pushViewController:BusinessIfonVC animated:YES];    }}

2.实现路线搜索，路径规划，获取街道名称等功能

通过经纬度获取地址，逆地理编码

-(void)getStartAddress{    //起点地址    CLGeocoder *Geocoder = [[CLGeocoder alloc]init];    CLGeocodeCompletionHandler handler = ^(NSArray *place,NSError *error){        for(CLPlacemark *placemark in place){            NSString *tmp = [[NSString alloc]init];            tmp = placemark.subThoroughfare;            if (tmp == nil) {                tmp = @"";            }            NSString *startAdr = [[NSString alloc]initWithFormat:@"%@%@",placemark.thoroughfare,tmp];            _startCityText.text = placemark.locality;            if ([startAdr isEqualToString:@"(null)"]) {                _startAddrText.text = @"获取地址失败";            }else{            _startAddrText.text = startAdr;            }    }    };    CLLocation *loc = [[CLLocation alloc]initWithLatitude:self.startCoor.latitude longitude:self.startCoor.longitude];    [Geocoder reverseGeocodeLocation:loc completionHandler:handler];}

路径检索，该部分没有整理，将乘车和换乘信息放到了LineInfo，steps等模型中。

- (void)onGetTransitRouteResult:(BMKRouteSearch*)searcher result:(BMKTransitRouteResult*)result errorCode:(BMKSearchErrorCode)error{    NSMutableArray *lineArr = [[NSMutableArray alloc]init];    NSArray* array = [NSArray arrayWithArray:_mapView.annotations];    [_mapView removeAnnotations:array];    array = [NSArray arrayWithArray:_mapView.overlays];    [_mapView removeOverlays:array];    if (error == BMK_SEARCH_NO_ERROR) {        for(int j = 0; j < [result.routes count];j++)        {        NSMutableArray *busTitleArr = [[NSMutableArray alloc]init];        NSMutableArray *lineStepsArr = [[NSMutableArray alloc]init];        NSMutableArray *stepsArr = [[NSMutableArray alloc]init];    //生成数据模型        LineInfoModel *lineInfo = [[LineInfoModel alloc]init];        BMKTransitRouteLine* plan = (BMKTransitRouteLine*)[result.routes objectAtIndex:j];    //数据模型:获得路线长度        lineInfo.distance = plan.distance;    //数据模型:获得路线消耗时间        lineInfo.dates = plan.duration.dates;        lineInfo.hours = plan.duration.hours;        lineInfo.minutes = plan.duration.minutes;        lineInfo.seconds = plan.duration.seconds;    // 获得轨迹点        lineInfo.planStepsArr = plan.steps;        // 计算路线方案中的路段数目        int size = [plan.steps count];        int planPointCounts = 0;        for (int i = 0; i < size; i++) {            BMKTransitStep* transitStep = [plan.steps objectAtIndex:i];    //数据模型:获得乘坐公交数组            DLog(@"%@",transitStep.vehicleInfo.title);            if (transitStep.vehicleInfo.title) {                [busTitleArr addObject:transitStep.vehicleInfo.title];            }    //数据模型:获取换乘信息            if (transitStep.instruction) {                transitStep.instruction = [transitStep.instruction stringByReplacingOccurrencesOfString:@"<font color=\"#313233\">" withString:@""];                [lineStepsArr addObject:transitStep.instruction];            }            DLog(@"%@ %@",transitStep.vehicleInfo.title,transitStep.instruction);            if(i==0){                RouteAnnotation* item = [[RouteAnnotation alloc]init];                item.coordinate = plan.starting.location;                item.title = @"起点";                item.type = 0;//                [_mapView addAnnotation:item]; // 添加起点标注//     //                [stepsArr addObject:item];            }else if(i==size-1){                RouteAnnotation* item = [[RouteAnnotation alloc]init];                item.coordinate = plan.terminal.location;                item.title = @"终点";                item.type = 1;                [stepsArr addObject:item];//                [_mapView addAnnotation:item]; // 添加起点标注//                      }            RouteAnnotation* item = [[RouteAnnotation alloc]init];            item.coordinate = transitStep.entrace.location;            item.title = transitStep.instruction;            transitStep.instruction = [transitStep.instruction stringByReplacingOccurrencesOfString:@"<font color=\"#313233\">" withString:@""];            item.type = 3;            [stepsArr addObject:item];//            [_mapView addAnnotation:item];// //            //            //轨迹点总数累计            planPointCounts += transitStep.pointsCount;        }        lineInfo.vehicleInfoArr = busTitleArr;        lineInfo.lineStepsArr = lineStepsArr;        lineInfo.stepsArr = stepsArr;        lineInfo.planPointCounts = planPointCounts;        [lineArr addObject:lineInfo];//        //轨迹点//        BMKMapPoint * temppoints = new BMKMapPoint[planPointCounts];//        int i = 0;//        for (int j = 0; j < size; j++) {//            BMKTransitStep* transitStep = [plan.steps objectAtIndex:j];//            int k=0;//            for(k=0;k<transitStep.pointsCount;k++) {//                temppoints[i].x = transitStep.points[k].x;//                temppoints[i].y = transitStep.points[k].y;//                i++;//            }        }        self.lineStatusArr = lineArr;      // 通过points构建BMKPolyline//      BMKPolyline* polyLine = [BMKPolyline polylineWithPoints:temppoints count:planPointCounts];//      [_mapView addOverlay:polyLine]; // 添加路线overlay//      delete []temppoints;//        }        [_tableView reloadData];    }}- (void)onGetDrivingRouteResult:(BMKRouteSearch*)searcher result:(BMKDrivingRouteResult*)result errorCode:(BMKSearchErrorCode)error{    NSArray* array = [NSArray arrayWithArray:_mapView.annotations];    [_mapView removeAnnotations:array];    array = [NSArray arrayWithArray:_mapView.overlays];    [_mapView removeOverlays:array];    if (error == BMK_SEARCH_NO_ERROR) {        BMKDrivingRouteLine* plan = (BMKDrivingRouteLine*)[result.routes objectAtIndex:0];        // 计算路线方案中的路段数目        int size = [plan.steps count];        int planPointCounts = 0;        for (int i = 0; i < size; i++) {            BMKDrivingStep* transitStep = [plan.steps objectAtIndex:i];            if(i==0){                RouteAnnotation* item = [[RouteAnnotation alloc]init];                item.coordinate = plan.starting.location;                item.title = @"起点";                item.type = 0;                [_mapView addAnnotation:item]; // 添加起点标注            }else if(i==size-1){                RouteAnnotation* item = [[RouteAnnotation alloc]init];                item.coordinate = plan.terminal.location;                item.title = @"终点";                item.type = 1;                [_mapView addAnnotation:item]; // 添加起点标注            }            //添加annotation节点            RouteAnnotation* item = [[RouteAnnotation alloc]init];            item.coordinate = transitStep.entrace.location;            item.title = transitStep.entraceInstruction;            item.degree = transitStep.direction * 30;            item.type = 4;            [_mapView addAnnotation:item];            //轨迹点总数累计            planPointCounts += transitStep.pointsCount;        }        // 添加途经点        if (plan.wayPoints) {            for (BMKPlanNode* tempNode in plan.wayPoints) {                RouteAnnotation* item = [[RouteAnnotation alloc]init];                item = [[RouteAnnotation alloc]init];                item.coordinate = tempNode.pt;                item.type = 5;                item.title = tempNode.name;                [_mapView addAnnotation:item];            }        }        //轨迹点        BMKMapPoint * temppoints = new BMKMapPoint[planPointCounts];        int i = 0;        for (int j = 0; j < size; j++) {            BMKDrivingStep* transitStep = [plan.steps objectAtIndex:j];            int k=0;            for(k=0;k<transitStep.pointsCount;k++) {                temppoints[i].x = transitStep.points[k].x;                temppoints[i].y = transitStep.points[k].y;                i++;            }        }        // 通过points构建BMKPolyline        BMKPolyline* polyLine = [BMKPolyline polylineWithPoints:temppoints count:planPointCounts];        [_mapView addOverlay:polyLine]; // 添加路线overlay        delete []temppoints;    }}- (void)onGetWalkingRouteResult:(BMKRouteSearch*)searcher result:(BMKWalkingRouteResult*)result errorCode:(BMKSearchErrorCode)error{    NSArray* array = [NSArray arrayWithArray:_mapView.annotations];    [_mapView removeAnnotations:array];    array = [NSArray arrayWithArray:_mapView.overlays];    [_mapView removeOverlays:array];    if (error == BMK_SEARCH_NO_ERROR) {        BMKWalkingRouteLine* plan = (BMKWalkingRouteLine*)[result.routes objectAtIndex:0];        int size = [plan.steps count];        int planPointCounts = 0;        for (int i = 0; i < size; i++) {            BMKWalkingStep* transitStep = [plan.steps objectAtIndex:i];            if(i==0){                RouteAnnotation* item = [[RouteAnnotation alloc]init];                item.coordinate = plan.starting.location;                item.title = @"起点";                item.type = 0;                [_mapView addAnnotation:item]; // 添加起点标注            }else if(i==size-1){                RouteAnnotation* item = [[RouteAnnotation alloc]init];                item.coordinate = plan.terminal.location;                item.title = @"终点";                item.type = 1;                [_mapView addAnnotation:item]; // 添加起点标注            }            //添加annotation节点            RouteAnnotation* item = [[RouteAnnotation alloc]init];            item.coordinate = transitStep.entrace.location;            item.title = transitStep.entraceInstruction;            item.degree = transitStep.direction * 30;            item.type = 4;            [_mapView addAnnotation:item];            //轨迹点总数累计            planPointCounts += transitStep.pointsCount;        }        //轨迹点        BMKMapPoint * temppoints = new BMKMapPoint[planPointCounts];        int i = 0;        for (int j = 0; j < size; j++) {            BMKWalkingStep* transitStep = [plan.steps objectAtIndex:j];            int k=0;            for(k=0;k<transitStep.pointsCount;k++) {                temppoints[i].x = transitStep.points[k].x;                temppoints[i].y = transitStep.points[k].y;                i++;            }        }        // 通过points构建BMKPolyline        BMKPolyline* polyLine = [BMKPolyline polylineWithPoints:temppoints count:planPointCounts];        [_mapView addOverlay:polyLine]; // 添加路线overlay        delete []temppoints;    }}

3.画路径

我这里实现是跳转到另一个控制器中了，下面是他一些需要的数据

//路线长度@property (nonatomic,assign) int distance;//路线消耗时间@property (nonatomic,assign) int dates;@property (nonatomic,assign) int hours;@property (nonatomic,assign) int minutes;@property (nonatomic,assign) int seconds;//交通工具数组@property (nonatomic,strong) NSArray *vehicleInfoArr;//换乘信息@property (nonatomic,strong) NSArray *lineStepsArr;//节点@property (nonatomic,strong) NSArray *stepsArr;//轨迹点个数@property (nonatomic,assign) int planPointCounts;//轨迹点@property (nonatomic,strong) NSArray *planStepsArr;

接下来是画路经，关于乘车数据的展示，就是一个tableview上添加了手势，不做解释。

-(void)drawMap{    BMKPointAnnotation* item = [[BMKPointAnnotation alloc]init];    item = [_lineInfo.stepsArr firstObject];    [_mapView setCenterCoordinate:item.coordinate];    [_mapView addAnnotations:_lineInfo.stepsArr];    BMKMapPoint* temppoints = (BMKMapPoint *)malloc(sizeof(CLLocationCoordinate2D) * _lineInfo.planPointCounts);    int i = 0;    for (int j = 0; j < [_lineInfo.planStepsArr count]; j++) {            BMKTransitStep* transitStep = [_lineInfo.planStepsArr objectAtIndex:j];            int k=0;            for(k=0;k<transitStep.pointsCount;k++) {                temppoints[i].x = transitStep.points[k].x;                temppoints[i].y = transitStep.points[k].y;                i++;        }    }    BMKPolyline* polyLine =[BMKPolyline  polylineWithPoints:temppoints count:_lineInfo.planPointCounts];    if (nil != polyLine) {           [_mapView addOverlay:polyLine]; // 添加路线overlay    }    free(temppoints);}- (BMKOverlayView*)mapView:(BMKMapView *)map viewForOverlay:(id<BMKOverlay>)overlay{    if ([overlay isKindOfClass:[BMKPolyline class]]) {        BMKPolylineView* polylineView = [[BMKPolylineView alloc] initWithOverlay:overlay];        polylineView.fillColor = [[UIColor cyanColor] colorWithAlphaComponent:1];        polylineView.strokeColor = [[UIColor blueColor] colorWithAlphaComponent:0.7];        polylineView.lineWidth = 3.0;        return polylineView;    }    return nil;}

// 判断标注类型，来处理- (BMKAnnotationView*)getRouteAnnotationView:(BMKMapView *)mapview viewForAnnotation:(MyBMKPointAnnotation*)routeAnnotation{    BMKAnnotationView* view = nil;    switch (routeAnnotation.type) {        case 0:        {            view = [mapview dequeueReusableAnnotationViewWithIdentifier:@"start_node"];            if (view == nil) {                view = [[BMKAnnotationView alloc]initWithAnnotation:routeAnnotation reuseIdentifier:@"start_node"];                view.image = [UIImage imageWithContentsOfFile:[self getMyBundlePath1:@"images/icon_nav_start.png"]];                view.centerOffset = CGPointMake(0, -(view.frame.size.height * 0.5));                view.canShowCallout = TRUE;            }            view.annotation = routeAnnotation;        }            break;        case 1:        {            view = [mapview dequeueReusableAnnotationViewWithIdentifier:@"end_node"];            if (view == nil) {                view = [[BMKAnnotationView alloc]initWithAnnotation:routeAnnotation reuseIdentifier:@"end_node"];                view.image = [UIImage imageWithContentsOfFile:[self getMyBundlePath1:@"images/icon_nav_end.png"]];                view.centerOffset = CGPointMake(0, -(view.frame.size.height * 0.5));                view.canShowCallout = TRUE;            }            view.annotation = routeAnnotation;        }            break;        case 2:        {            view = [mapview dequeueReusableAnnotationViewWithIdentifier:@"bus_node"];            if (view == nil) {                view = [[BMKAnnotationView alloc]initWithAnnotation:routeAnnotation reuseIdentifier:@"bus_node"];                view.image = [UIImage imageWithContentsOfFile:[self getMyBundlePath1:@"images/icon_nav_bus.png"]];                view.canShowCallout = TRUE;            }            view.annotation = routeAnnotation;        }            break;        case 3:        {            view = [mapview dequeueReusableAnnotationViewWithIdentifier:@"rail_node"];            if (view == nil) {                view = [[BMKAnnotationView alloc]initWithAnnotation:routeAnnotation reuseIdentifier:@"rail_node"];                view.image = [UIImage imageWithContentsOfFile:[self getMyBundlePath1:@"images/icon_nav_rail.png"]];                view.canShowCallout = TRUE;            }            view.annotation = routeAnnotation;        }            break;        case 4:        {            view = [mapview dequeueReusableAnnotationViewWithIdentifier:@"route_node"];            if (view == nil) {                view = [[BMKAnnotationView alloc]initWithAnnotation:routeAnnotation reuseIdentifier:@"route_node"];                view.canShowCallout = TRUE;            } else {                [view setNeedsDisplay];            }            UIImage* image = [UIImage imageWithContentsOfFile:[self getMyBundlePath1:@"images/icon_direction.png"]];            view.image = [image imageRotatedByDegrees:routeAnnotation.degree];            view.annotation = routeAnnotation;        }            break;        case 5:        {            view = [mapview dequeueReusableAnnotationViewWithIdentifier:@"waypoint_node"];            if (view == nil) {                view = [[BMKAnnotationView alloc]initWithAnnotation:routeAnnotation reuseIdentifier:@"waypoint_node"];                view.canShowCallout = TRUE;            } else {                [view setNeedsDisplay];            }            UIImage* image = [UIImage imageWithContentsOfFile:[self getMyBundlePath1:@"images/icon_nav_waypoint.png"]];            view.image = [image imageRotatedByDegrees:routeAnnotation.degree];            view.annotation = routeAnnotation;        }            break;        default:            break;    }    return view;}- (BMKAnnotationView *)mapView:(BMKMapView *)view viewForAnnotation:(id <BMKAnnotation>)annotation{    if ([annotation isKindOfClass:[BMKPointAnnotation class]]) {        return [self getRouteAnnotationView:view viewForAnnotation:(MyBMKPointAnnotation *)annotation];    }    return nil;}- (UIImage*)imageRotatedByDegrees:(CGFloat)degrees{    CGFloat width = CGImageGetWidth(self.CGImage);    CGFloat height = CGImageGetHeight(self.CGImage);    CGSize rotatedSize;    rotatedSize.width = width;    rotatedSize.height = height;    UIGraphicsBeginImageContext(rotatedSize);    CGContextRef bitmap = UIGraphicsGetCurrentContext();    CGContextTranslateCTM(bitmap, rotatedSize.width/2, rotatedSize.height/2);    CGContextRotateCTM(bitmap, degrees * M_PI / 180);    CGContextRotateCTM(bitmap, M_PI);    CGContextScaleCTM(bitmap, -1.0, 1.0);    CGContextDrawImage(bitmap, CGRectMake(-rotatedSize.width/2, -rotatedSize.height/2, rotatedSize.width, rotatedSize.height), self.CGImage);    UIImage* newImage = UIGraphicsGetImageFromCurrentImageContext();    UIGraphicsEndImageContext();    return newImage;}

MarkDown不会用，代码弄得很乱，但是经过几天的研究，可以很舒服的上代码了！