陈斌彬的技术博客

Stay foolish,stay hungry

iOS - 百度基础地图(原创)

简介

开发者可利用 SDK 提供的接口，使用百度为您提供的基础地图数据。目前百度地图 SDK 所提供的地图等级为 19 级，所包含的信息有建筑物、道路、河流、学校、公园等内容。

百度地图支持多点触摸、双击放大、多点单击缩小、旋转等手势操作，此外自2.2.0版本起，支持相应的控制接口来开启/关闭这些手势操作；此外，在该版本地图对象实现了多实例特性，即开发者可以在一个页面中建立多个地图对象，并且针对这些对象分别操作且不会产生相互干扰。具体使用方法请参考 MultiMapViewDemo 的介绍。

地图上自定义的标注点和覆盖物我们统称为地图覆盖物。您可以通过定制 BMKAnnotation 和 BMKOverlay 来添加对应的标注点和覆盖物。地图覆盖物的设计遵循数据与 View 分离的原则，BMKAnnotation 和 BMKOverlay 系列的类主要用来存放覆盖物相关的数据，BMKAnnotaionView 和 BMKOverlayView 系列类为覆盖物对应的 View。

SDK 支持画点、折线、圆、多边形（包括凹凸两种）、图片图层和自定义覆盖物。从 2.0.0 开始矢量地图采用 OpenGL 绘制，新增支持 OpenGL 绘制的基本线绘制、面绘制接口。详见 AnnotationDemo，SDK 内置的 BMKPolylineOverlay、BMKPolygonOverlay，BMKCircleOverlay 均采用 OpenGL 绘制。

卫星图

百度地图SDK为您提供基础矢量图和卫星图两种类型的地图，开启卫星图的方法如下：

//切换为卫星图  
[_mapView setMapType:BMKMapTypeSatellite];

程序截图：

img

运行后效果如下：

img

由卫星图切换为普通矢量图的核心代码如下：

//切换为普通地图  
[_mapView setMapType:BMKMapTypeStandard];

实时交通图

利用地图 SDK 所提供的接口，开发者可显示当前地图城市内的实时路况信息（点击查看支持实时路况的城市）。此外，自2.0.0版本起，SDK 还支持城际（城市之间，如高速）路况。

开启实时路况的核心代码如下：

//打开实时路况图层  
[_mapView setTrafficEnabled:YES];

img

地图标注

BMKAnnotation 为标注对应的 protocal，您可以自定义标注类实现该 protocal。百度地图SDK也预置了基本的标注点（BMKPointAnnotation）和一个大头针标注 View（BMKPinAnnotationView），您可以直接使用来显示标注。方法如下：

第一步，修改您的 ViewController.h 文件，添加以下代码，使您的 ViewController 实现 BMKMapViewDelegate 协议：

#import <UIKit/UIKit.h>     
#import "BMapKit.h"       
@interface AnnotationDemoViewController : UIViewController <BMKMapViewDelegate> {      
    IBOutlet BMKMapView* _mapView;       
}       
@end

第二步，修改您的 ViewController.m 文件，实现 BMKMapViewDelegate 的 _mapView:viewForAnnotation: 函数，并在 viewDidAppear 添加标注数据对象，核心代码如下：

- (void) viewDidAppear:(BOOL)animated {
    // 添加一个PointAnnotation
    BMKPointAnnotation* annotation = [[BMKPointAnnotation alloc]init];
    CLLocationCoordinate2D coor;
    coor.latitude = 23.5533;
    coor.longitude = 116.3688;
    annotation.coordinate = coor;
    annotation.title = @"这里是揭阳";
    [mapView addAnnotation:annotation];
}

// Override
- (BMKAnnotationView *)mapView:(BMKMapView *)mapView viewForAnnotation:(id <BMKAnnotation>)annotation
{
    if ([annotation isKindOfClass:[BMKPointAnnotation class]]) {
        BMKPinAnnotationView *newAnnotationView = [[BMKPinAnnotationView alloc] initWithAnnotation:annotation reuseIdentifier:@"myAnnotation"];
        newAnnotationView.pinColor = BMKPinAnnotationColorPurple;
        newAnnotationView.animatesDrop = YES;// 设置该标注点动画显示
        return newAnnotationView;
    }
    return nil;
}

程序截图：

img

运行后，会在地图显示对应的标注点，点击会弹出气泡，效果如图：

img

通过以上几步简单的操作，您就可以实现在地图上添加标注了，相应的删除标注方法如下：

if (annotation != nil) {    
    [_mapView removeAnnotation:annotation];    
}

几何图形

百度地图 SDK 支持的几何图形有：折线、弧线、多边形和圆，折线、弧线及其他几何图形的边框自v2.6.0版本起支持使用虚线或者纹理图片进行绘制（具体使用方法请参考官方 Demo，覆盖物章节的介绍）。开发者可利用相应的接口，在地图上快速绘制这些图形，满足相应的业务需求。

折线

在地图上添加折线的方法如下：

第一步，修改您的 ViewController.h 文件，添加以下代码，使您的 ViewController 实现 BMKMapViewDelegate 协议：

#import <UIKit/UIKit.h>  
#import "BMapKit.h"  
@interface OverlayDemoViewController : UIViewController <BMKMapViewDelegate>{  
    IBOutlet BMKMapView* _mapView;  
}  
@end

第二步，修改您的 ViewController.m 文件，实现 BMKMapViewDelegate 的 mapView:viewForOverlay: 函数，并在 viewDidLoad 添加折线数据对象：

- (void)viewDidLoad {     
    [super viewDidLoad];    
    // 添加折线覆盖物    
    CLLocationCoordinate2D coors[2] = {0}; 
    coors[0].latitude = 39.315; 
    coors[0].longitude = 116.304;
    coors[1].latitude = 39.515; 
    coors[1].longitude = 116.504;
    BMKPolyline* polyline = [BMKPolyline polylineWithCoordinates:coors count:2];
    [_mapView addOverlay:polyline];    
}    
// Override    
- (BMKOverlayView *)mapView:(BMKMapView *)mapView viewForOverlay:(id <BMKOverlay>)overlay{    
   if ([overlay isKindOfClass:[BMKPolyline class]]){    
        BMKPolylineView* polylineView = [[[BMKPolylineView alloc] initWithOverlay:overlay] autorelease];    
        polylineView.strokeColor = [[UIColor purpleColor] colorWithAlphaComponent:1];
        polylineView.lineWidth = 5.0;

        return polylineView;    
   }    
   return nil;    
}

程序截图：

img

第三步，运行结果：

img

iOS地图SDK自v2.8.0版本起，新增了折线多段颜色绘制能力，实现的核心代码如下： 第一步，BMKMapView 对象，添加分段纹理绘制折线覆盖物，核心代码如下：

    CLLocationCoordinate2D coords[5] = {0};
    coords[0].latitude = 23.553;
    coords[0].longitude = 116.368;
    coords[1].latitude = 23.513;
    coords[1].longitude = 116.409;
    coords[2].latitude = 23.543;
    coords[2].longitude = 116.459;
    coords[3].latitude = 23.503;
    coords[3].longitude = 116.654;
    coords[4].latitude = 23.565;
    coords[4].longitude = 116.704;
    //构建分段纹理索引数组
    NSArray *textureIndex = [NSArray arrayWithObjects:
                             [NSNumber numberWithInt:0],
                             [NSNumber numberWithInt:1],
                             [NSNumber numberWithInt:2],
                             [NSNumber numberWithInt:1], nil];

    //构建BMKPolyline,使用分段纹理
    BMKPolyline* polyLine = [BMKPolyline polylineWithCoordinates:coords count:5 textureIndex:textureIndex];
    //添加分段纹理绘制折线覆盖物
    [mapView addOverlay:polyLine];

程序截图：

img

第二步，实现 BMKMapViewDelegate 的 mapView:viewForOverlay: 回调，核心代码如下：

- (BMKOverlayView*)mapView:(BMKMapView *)map viewForOverlay:(id<BMKOverlay>)overlay
{
    if ([overlay isKindOfClass:[BMKPolyline class]]) {
        BMKPolylineView* polylineView = [[BMKPolylineView alloc] initWithOverlay:overlay];
        polylineView.lineWidth = 5;
        polylineView.isFocus = YES;// 是否分段纹理绘制（突出显示），默认YES
        //加载分段纹理图片，必须否则不能进行分段纹理绘制
        [polylineView loadStrokeTextureImages:
         [NSArray arrayWithObjects:[UIImage imageNamed:@"road_blue_arrow.png"],
          [UIImage imageNamed:@"road_green_arrow.png"],
          [UIImage imageNamed:@"road_red_arrow.png"],nil]];
        return polylineView;
    }

    return nil;
}

程序截图：

img

img

弧线

百度地图iOS SDK自v2.1.1本起，新增了绘制弧线的方法。用户可以根据三个有序点唯一确定一条弧线，满足您的业务需求。首先，修改您的 .m 文件，实现 BMKMapViewDelegate 的 _mapView:viewForOverlay: 函数，并在 viewDidLoad 添加弧线数据对象，核心代码如下

CLLocationCoordinate2D coords[3] = {0};
coords[0].latitude = 23.553;
coords[0].longitude = 116.368;
coords[1].latitude = 23.513;
coords[1].longitude = 116.409;
coords[2].latitude = 23.543;
coords[2].longitude = 116.459;

BMKArcline *arcline = [BMKArcline arclineWithCoordinates:coords];
[mapView addOverlay:arcline];

- (BMKOverlayView *)mapView:(BMKMapView *)mapView viewForOverlay:(id<BMKOverlay>)overlay
{
    if ([overlay isKindOfClass:[BMKArcline class]])
    {
        BMKArclineView* arclineView = [[BMKArclineView alloc] initWithOverlay:overlay];
        arclineView.strokeColor = [[UIColor blueColor] colorWithAlphaComponent:0.5];
        arclineView.lineWidth = 5.0;

        return arclineView;
    }
    return nil;
}

程序截图：

img

运行后，效果如图：

img

多边形

修改 ViewController.h 文件，使其实现 BMKMapViewDelegate；同时修改 ViewController.m 文件，实现 BMKMapViewDelegate 的_mapView:viewForOverlay: 函数，并在 viewDidLoad 添加多边形数据对象。核心代码如下：

- (void)viewDidLoad {     
    [super viewDidLoad];     
    // 添加多边形覆盖物    
 CLLocationCoordinate2D coords[3] = {0};
coords[0].latitude = 23.553;
coords[0].longitude = 116.368;
coords[1].latitude = 23.513;
coords[1].longitude = 116.409;
coords[2].latitude = 23.543;
coords[2].longitude = 116.459;

BMKPolygon* polygon = [BMKPolygon polygonWithCoordinates:coords count:3];
[mapView addOverlay:polygon];

}    

// Override
- (BMKOverlayView *)mapView:(BMKMapView *)mapView viewForOverlay:(id <BMKOverlay>)overlay{
    if ([overlay isKindOfClass:[BMKPolygon class]]){
        BMKPolygonView* polygonView = [[BMKPolygonView alloc] initWithOverlay:overlay];
        polygonView.strokeColor = [[UIColor purpleColor] colorWithAlphaComponent:1];
        polygonView.fillColor = [[UIColor cyanColor] colorWithAlphaComponent:0.2];
        polygonView.lineWidth = 5.0;

        return polygonView;
    }
    return nil;
}

程序截图：

img

运行后的显示效果如下图所示：

img

Resource Reference