高德地图绘制轨迹

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 

并添加代理

再添加几个容器

{
    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 )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)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;
}

详见gitHub:https://github.com/1192484280/MapPolyline.git