iOS 高德地图SDK集成初试

2018-09-29

前言

入职新公司后接手的新项目使用OC开发，项目主要功能里涉及地图开发，技术选型上使用高德地图服务，本篇博客主要记录高德地图SDK的集成以及相关使用。

环境配置

OC， Xcode 9.4.1

注册

首先在高德开发平台注册一个账号，注册流程略。注册完成后，我们需要在控制台“我的应用”里创建一个应用，根据使用的平台创建相应的Key。
创建key

引入SDK

这里我们使用CocoaPods来管理高德地图的SDK。在项目的podfile里根据需要添加以下SDK。

  pod 'AMap2DMap'    #高德2D地图SDK
  pod 'AMap3DMap'    #高德3D地图SDK
pod 'AMapLocation' #高德定位SDK
  pod 'AMapSearch'   #高德地图搜索SDK
  pod 'AMapTrack'    #高德猎鹰SDK

注意：高德2D地图和3D地图SDK不能同时引入，其主要差别在于：2D地图是栅格地图，采用切片的方式显示地图，3D地图为矢量地图，采用终端绘制地图的方式，地图功能更加丰富。

功能使用

启动SDK

在引入头文件#import<AMapFoundationKit/AMapFoundationKit.h>后，调用以下方法配置高德服务的key。

1	[AMapServices sharedServices].apiKey =@"您的key";

显示地图

实例化一个地图，添加到控制器的view上。我们让控制器持有一个地图属性，在该属性的get方法里配置地图的功能。

- (MAMapView *)mapView {
    if (!_mapView) {
        _mapView = [[MAMapView alloc] initWithFrame: self.view.bounds];
		// 显示比例尺
        _mapView.showsScale = NO;
		// 显示指南针
        _mapView.showsCompass = NO;
		// 显示定位蓝点
        _mapView.showsUserLocation = YES;
		// 用户定位模式
        _mapView.userTrackingMode = MAUserTrackingModeFollow;
		// 设置缩放级别
        [_mapView setZoomLevel:15];
		// 设置当前地图的中心点：例如默认地图中心显示坐标为（39.9088230000, 116.3974700000）
        _mapView.centerCoordinate = CLLocationCoordinate2DMake(39.9088230000, 116.3974700000);
    }
    return _mapView;
}

绘制标记点、折线、面

通过实现MAMapViewDelegate的相关代理方法实现地图绘制。

标记点

/**
 * @brief 根据anntation生成对应的View
 * @param mapView 地图View
 * @param annotation 指定的标注
 * @return 生成的标注View
 */
- (MAAnnotationView *)mapView:(MAMapView *)mapView viewForAnnotation:(id<MAAnnotation>)annotation {
    if ([annotation isKindOfClass:[MAPointAnnotation class]]) {
        static NSString *reuseIndetifier = @"annotationReuseIndetifier";
        MAAnnotationView *annotationView = (MAAnnotationView *)[mapView dequeueReusableAnnotationViewWithIdentifier:reuseIndetifier];
        if (annotationView == nil) {
            annotationView = [[MAAnnotationView alloc] initWithAnnotation:annotation
                                                          reuseIdentifier:reuseIndetifier];
        }
		// 设置标记点的图片
        // annotationView.image = ;
        // 设置中心点偏移，使得标注底部中间点成为经纬度对应点
        // annotationView.centerOffse = 

        return annotationView;
    }
    return nil;
}

标注可以精确表示用户需要展示的位置信息，高德地图SDK提供的标注功能允许用户自定义图标和信息窗，同时提供了标注的点击、拖动事件的回调。SDK 提供的地图标注为MAAnnotation类，不同的标记可以根据图标和改变信息窗的样式和内容加以区分。

iOS SDK提供的大头针标注MAPinAnnotationView，通过它可以设置大头针颜色、是否显示动画、是否支持长按后拖拽大头针改变坐标等。

通过以下方法添加标注。

// 1 实例化MAPointAnnotation类
MAPointAnnotation *pointAnnotation = [[MAPointAnnotation alloc] init];
// 2 设置标注点的坐标
pointAnnotation.coordinate = CLLocationCoordinate2DMake(coordinate.latitude, coordinate.longitude);
// 3 调用地图的addAnnotation方法将标注点添加到地图上
[self.mapView addAnnotation:pointAnnotation];

折线、面

/**
 * @brief 根据overlay生成对应的Renderer
 * @param mapView 地图View
 * @param overlay 指定的overlay
 * @return 生成的覆盖物Renderer
 */
- (MAOverlayRenderer *)mapView:(MAMapView *)mapView rendererForOverlay:(id <MAOverlay>)overlay
{
    // 线
    if ([overlay isKindOfClass:[MAPolyline class]]) {
        MAPolylineRenderer *polylineRenderer = [[MAPolylineRenderer alloc] initWithPolyline:overlay];
        // 线宽
        polylineRenderer.lineWidth    = 3.f;
        // 颜色
        polylineRenderer.strokeColor  = [self markColor];
        return polylineRenderer;
    }

	// 圆形
    if ([overlay isKindOfClass:[MACircle class]]) {
        MACircleRenderer *circleRenderer = [[MACircleRenderer alloc] initWithCircle:overlay];
        circleRenderer.lineWidth = 0;
        circleRenderer.strokeColor  = [[self markColor] colorWithAlphaComponent:0.2];
        circleRenderer.fillColor = [[self markColor] colorWithAlphaComponent:0.2];
        return circleRenderer;
    }
    return nil;
}

折线类为 MAPolyline，由一组经纬度坐标组成，并以有序序列形式建立一系列的线段。iOS SDK支持在3D矢量地图上绘制带箭头或有纹理等样式的折线，同时可设置折线端点和连接点的类型，以满足各种绘制线的场景。

//构造折线数据对象
    CLLocationCoordinate2D commonPolylineCoords[4];
    commonPolylineCoords[0].latitude = 39.832136;
    commonPolylineCoords[0].longitude = 116.34095;
    
    commonPolylineCoords[1].latitude = 39.832136;
    commonPolylineCoords[1].longitude = 116.42095;
    
    commonPolylineCoords[2].latitude = 39.902136;
    commonPolylineCoords[2].longitude = 116.42095;
    
    commonPolylineCoords[3].latitude = 39.902136;
    commonPolylineCoords[3].longitude = 116.44095;
    
    //构造折线对象
    MAPolyline *commonPolyline = [MAPolyline polylineWithCoordinates:commonPolylineCoords count:4];

    //在地图上添加折线对象
    [_mapView addOverlay: commonPolyline];

通过MACircle类绘制圆，圆是由中心点（经纬度）和半径（米）构成。

//构造圆
MACircle *circle = [MACircle circleWithCenterCoordinate:CLLocationCoordinate2DMake(39.952136, 116.50095) radius:5000];
//在地图上添加圆
[_mapView addOverlay: circle];

可实现类似效果图如下：

fan小陆