前言
入职新公司后接手的新项目使用OC开发,项目主要功能里涉及地图开发,技术选型上使用高德地图服务,本篇博客主要记录高德地图SDK的集成以及相关使用。
环境配置
OC, Xcode 9.4.1
注册
首先在高德开发平台注册一个账号,注册流程略。注册完成后,我们需要在控制台“我的应用”里创建一个应用,根据使用的平台创建相应的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。
[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];
可实现类似效果图如下: