1.需求
将多个运动点绘制成平滑的运动轨迹，并标记起点终点。
2.先上一张效果图
屏幕快照 2017-09-05 下午3.36.53.png
3.使用高德或者百度地图实现这个功能很简单，下面我就以高德地图讲一下我的实现过程，基本就是拷Demo代码。
4_1.首先登陆高德管理平台，创建新应用，添加新key。(这一步就不做具体讲解了，看高德文档就行)
4A843DC7-26B5-4220-BD59-CD46D2D82192.png
4_2.将高德SDK导入项目。根据官方文档，使用cocoapods导入所需SDK(我这里全都导了，因为我的demo都会用到)
pod 'AMap3DMap' #3D地图
pod 'AMapSearch' #地图SDK搜索功能
pod 'AMapLocation' #定位sdk
4_3.引入高德SDK头文件。在所需页面引入高德头文件
#import <MAMapKit/MAMapKit.h>
并添加代理
<MAMapViewDelegate>
再添加几个容器
{
CLLocationCoordinate2D * _runningCoords;
NSUInteger _count;
MAMultiPolyline * _polyline;
}
@property (nonatomic, strong) MAMapView *mapView;
屏幕快照 2017-09-05 上午10.51.05.png
4_4.懒加载mapView
- (MAMapView *)mapView{
if (!_mapView) {
_mapView = [[MAMapView alloc] initWithFrame:self.view.bounds];
_mapView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
_mapView.delegate = self;
[self.view addSubview:self.mapView];
}
return _mapView;
}
4_5.在viewDidLoad中注册高德，加载运动点假数据，绘制轨迹，设置大头针
- (void)viewDidLoad {
[super viewDidLoad];
self.title = @"绘制轨迹";
//注册高德
[AMapServices sharedServices].apiKey = @"dd3d5482d21dc9089ff7e303aa3022e5";
//加载假数据（我加载了一个名为“running_record”json文件）
[self initData];
//绘制轨迹
[self.mapView addOverlay:_polyline];
const CGFloat screenEdgeInset = 20;
UIEdgeInsets inset = UIEdgeInsetsMake(screenEdgeInset, screenEdgeInset, screenEdgeInset, screenEdgeInset);
[self.mapView setVisibleMapRect:_polyline.boundingMapRect edgePadding:inset animated:NO];
//设置起点终点大头针
[self setPointAnnotation];
}
4_6.实现方法
- (void)initData
{
NSData *jsdata = [NSData dataWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"running_record" ofType:@"json"]];
NSMutableArray * indexes = [NSMutableArray array];
if (jsdata)
{
NSArray *dataArray = [NSJSONSerialization JSONObjectWithData:jsdata options:NSJSONReadingAllowFragments error:nil];
_count = dataArray.count;
_runningCoords = (CLLocationCoordinate2D *)malloc(_count * sizeof(CLLocationCoordinate2D));
for (int i = 0; i < _count; i++)
{
@autoreleasepool
{
NSDictionary * data = dataArray[i];
_runningCoords[i].latitude = [data[@"latitude"] doubleValue];
_runningCoords[i].longitude = [data[@"longtitude"] doubleValue];
[indexes addObject:@(i)];
}
}
}
_polyline = [MAMultiPolyline polylineWithCoordinates:_runningCoords count:_count drawStyleIndexes:indexes];
}
#pragma mark - mapview delegate
- (MAOverlayRenderer *)mapView:(MAMapView *)mapView rendererForOverlay:(id <MAOverlay>)overlay
{
if (overlay == _polyline)
{
MAPolylineRenderer *polylineRenderer = [[MAPolylineRenderer alloc] initWithPolyline:overlay];
polylineRenderer.lineWidth = 8.f;
polylineRenderer.strokeColor = [UIColor colorWithRed:0 green:1 blue:0 alpha:0.6];
polylineRenderer.lineJoinType = kMALineJoinRound;
polylineRenderer.lineCapType = kMALineCapRound;
[polylineRenderer setStrokeImage:[UIImage imageNamed:@"map_history"]];
return polylineRenderer;
}
return nil;
}
#pragma mark - 设置起点终点大头针
- (void)setPointAnnotation{
NSData *jsdata = [NSData dataWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"running_record" ofType:@"json"]];
//起点
NSDictionary * startData = [NSDictionary dictionary];
//终点
NSDictionary * stopData = [NSDictionary dictionary];
if (jsdata)
{
NSArray *dataArray = [NSJSONSerialization JSONObjectWithData:jsdata options:NSJSONReadingAllowFragments error:nil];
startData = [dataArray firstObject];
stopData = [dataArray lastObject];
}
MAPointAnnotation *startPointAnnotation = [[MAPointAnnotation alloc] init];
startPointAnnotation.coordinate = CLLocationCoordinate2DMake([startData[@"latitude"] doubleValue], [startData[@"longtitude"] doubleValue]);
startPointAnnotation.title = @"起点";
[_mapView addAnnotation:startPointAnnotation];
MAPointAnnotation *stopPointAnnotation = [[MAPointAnnotation alloc] init];
stopPointAnnotation.coordinate = CLLocationCoordinate2DMake([stopData[@"latitude"] doubleValue], [stopData[@"longtitude"] doubleValue]);
stopPointAnnotation.title = @"终点";
[_mapView addAnnotation:stopPointAnnotation];
}
#pragma mark - 大头针回调
- (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];
}
if ([annotation.title isEqualToString:@"起点"]) {
annotationView.image = [UIImage imageNamed:@"icon_startAnima"];
}else{
annotationView.image = [UIImage imageNamed:@"icon_stopAnima"];
}
//设置中心点偏移，使得标注底部中间点成为经纬度对应点
annotationView.centerOffset = CGPointMake(0, -18);
return annotationView;
}
return nil;
}
