iOS-百度地圖自定義氣泡

CarWingfiel 7年前發布 | 7K 次閱讀 iOS開發移動開發

Paste_Image.png

文章簡單實現百度地圖添加標注和自定義氣泡的功能，基本都是SDK 提供的方法，不做詳細解釋。

很久沒有更新，具體教程請以官網文檔為準，本文只提供設計思路。

1.添加多個標注和自定義氣泡

添加自定義標注

[_mapView addAnnotations:array];

實現代理方法

#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;

        //自定義氣泡的內容，添加子控件在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];

}

路徑檢索

- (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不會用，代碼弄得很亂，但是經過幾天的研究，可以很舒服的上代碼了！

來自：http://www.jianshu.com/p/6a334f071c69

本文由用戶 CarWingfiel 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1484018053095.html

iOS開發移動開發

iOS-百度地圖自定義氣泡

相關經驗

相關資訊

相關文檔

目錄