先看效果：

WechatIMG1.png

（一）先說透明遮蓋物：因為多數(shù)跑步后的軌跡是黃色或者綠色，這與地圖上公路的顏色很接近，為了使軌跡更明顯，需要在地圖上添加一層半透明遮蓋物，這里我們直接用MapKit的MKCircle

@property (strong, nonatomic) MKCircle *transparentCircle;

#pragma mark - 添加半透明覆蓋層
- (void)addTransparentOverlay{
    self.transparentCircle = [MKCircle circleWithCenterCoordinate:CLLocationCoordinate2DMake(39.905, 116.398) radius:100000000];
    [self.mapView addOverlay:self.transparentCircle level:1];
}

這里要注意下透明遮蓋物和軌跡等id <MKOverlay>的level都要為1，另外這個MKCircle的半徑要足夠大，咕咚就有個很尷尬的問題,縮小到一定比例尺后，邊緣就暴露了(但他們用的應(yīng)該也不是MKCircle)：

WechatIMG2.png

最后在MKMapViewDelegate中實現(xiàn)相應(yīng)的渲染器即可：

- (MKOverlayRenderer *)mapView:(MKMapView *)mapView rendererForOverlay:(id <MKOverlay>)overlay{
    if ([overlay isKindOfClass:[MKCircle class]]){
        //半透明蒙層
        MKCircleRenderer *circleRenderer = [[MKCircleRenderer alloc] initWithCircle:overlay];
        circleRenderer.fillColor = [UIColor colorWithRed:0 green:0 blue:0 alpha:.2];
        return circleRenderer;
    }
    return nil;
}

（二）再說起點終點：運(yùn)動軌跡要添加起點終點，這樣才會方便用戶查看，看這個起點終點就類似于大頭針，所以自然想到了<MKAnnotation>協(xié)議，我的方法是自定義PointAnnotation。
PointAnnotation.h實現(xiàn)：

#import <Foundation/Foundation.h>
#import <MapKit/MapKit.h>

@interface PointAnnotation : NSObject<MKAnnotation>

/**
 *  大頭針的位置
 */
@property (nonatomic, assign) CLLocationCoordinate2D coordinate;
/**
 *  大頭針標(biāo)題
 */
@property (nonatomic, copy) NSString *title;
/**
 *  大頭針的子標(biāo)題
 */
@property (nonatomic, copy) NSString *subtitle;

@end

PointAnnotation.m什么都沒有~

#import "PointAnnotation.h"

@implementation PointAnnotation

@end

創(chuàng)建了自定義的大頭針之后，就要在mapView上addAnnotation了,這里面需要區(qū)分起始點圖片（我用title區(qū)分），以及相應(yīng)的坐標(biāo)，self.runningData.locationArray是我項目中存儲軌跡的數(shù)據(jù)結(jié)構(gòu)，按需替換即可：

#pragma mark - 添加起始點標(biāo)記
- (void)addStartAndEndPoint{
    
    PointAnnotation *pointAnnotation1 = [[PointAnnotation alloc] init];
    pointAnnotation1.title = @"start";
    NSDictionary *dic1 = [self.runningData.locationArray firstObject];
    CLLocationDegrees latitude1  = [dic1[@"latitude"] doubleValue];
    CLLocationDegrees longitude1 = [dic1[@"longitude"] doubleValue];
    pointAnnotation1.coordinate = CLLocationCoordinate2DMake(latitude1, longitude1);
    [self.mapView addAnnotation:pointAnnotation1];
    
    PointAnnotation *pointAnnotation2 = [[PointAnnotation alloc] init];
    pointAnnotation2.title = @"end";
    NSDictionary *dic2 = [self.runningData.locationArray lastObject];
    CLLocationDegrees latitude2  = [dic2[@"latitude"] doubleValue];
    CLLocationDegrees longitude2 = [dic2[@"longitude"] doubleValue];
    pointAnnotation2.coordinate = CLLocationCoordinate2DMake(latitude2, longitude2);
    [self.mapView addAnnotation:pointAnnotation2];
}

添加后會調(diào)用MKMapViewDelegate的代理方法(里面除了起點、終點外，還有每公里標(biāo)記的annotation)：

- (MKAnnotationView *)mapView:(MKMapView *)mapView viewForAnnotation:(id<MKAnnotation>)annotation{
    
    static NSString *placemarkIdentifier = @"PointAnnotation";
    if ([annotation isKindOfClass:[PointAnnotation class]]){
        
        MKAnnotationView *annotationView = [[MKAnnotationView alloc] initWithAnnotation:annotation reuseIdentifier:placemarkIdentifier];
        if([annotation.title isEqualToString:@"start"]){
            //起點
            annotationView.image = [UIImage imageNamed:@"StartPoint.png"];
        }else if([annotation.title isEqualToString:@"end"]){
            //終點
            annotationView.image = [UIImage imageNamed:@"EndPoint.png"];
        }else if([annotation.title isEqualToString:@"km"]){
            //公里
            annotationView.image = [UIImage imageNamed:@"KmBG.png"];
            UILabel *kmLabel = [[UILabel alloc] initWithFrame:CGRectMake(2, 1, annotationView.width-4, annotationView.height-2)];
            kmLabel.text = annotation.subtitle;
            kmLabel.textAlignment = NSTextAlignmentCenter;
            kmLabel.textColor = [UIColor blackColor];
            kmLabel.font = [UIFont fontWithName:@"Helvetica-Bold" size:12];
            kmLabel.numberOfLines = 0;
            kmLabel.adjustsFontSizeToFitWidth = YES;
            [annotationView addSubview:kmLabel];
        }
        return annotationView;
    }
    return nil;
    
}

到此，iphone自帶地圖上添加半透明遮蓋物和自定義annotation的工作就完事了，另外需要說一點就是：我在構(gòu)造MKAnnotationView的時候沒有使用類似UITableView構(gòu)造Cell的復(fù)用機(jī)制（暫時沒問題，但是annotation很多的時候也許會影響性能），原因是復(fù)用后在移動地圖時annotationView的順序會錯亂，暫時沒找到原因，誰有解決辦法請留言說明，謝謝~