先看效果：
WechatIMG1.png
（一）先说透明遮盖物：因为多数跑步后的轨迹是黄色或者绿色，这与地图上公路的颜色很接近，为了使轨迹更明显，需要在地图上添加一层半透明遮盖物，这里我们直接用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的半径要足够大，咕咚就有个很尴尬的问题,缩小到一定比例尺后，边缘就暴露了(但他们用的应该也不是MKCircle)：
WechatIMG2.png
最后在MKMapViewDelegate中实现相应的渲染器即可：
- (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;
}
（二）再说起点终点：运动轨迹要添加起点终点，这样才会方便用户查看，看这个起点终点就类似于大头针，所以自然想到了<MKAnnotation>协议，我的方法是自定义PointAnnotation。
PointAnnotation.h实现：
#import <Foundation/Foundation.h>
#import <MapKit/MapKit.h>
@interface PointAnnotation : NSObject<MKAnnotation>
/**
* 大头针的位置
*/
@property (nonatomic, assign) CLLocationCoordinate2D coordinate;
/**
* 大头针标题
*/
@property (nonatomic, copy) NSString *title;
/**
* 大头针的子标题
*/
@property (nonatomic, copy) NSString *subtitle;
@end
PointAnnotation.m什么都没有~
#import "PointAnnotation.h"
@implementation PointAnnotation
@end
创建了自定义的大头针之后，就要在mapView上addAnnotation了,这里面需要区分起始点图片（我用title区分），以及相应的坐标，self.runningData.locationArray是我项目中存储轨迹的数据结构，按需替换即可：
#pragma mark - 添加起始点标记
- (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];
}
添加后会调用MKMapViewDelegate的代理方法(里面除了起点、终点外，还有每公里标记的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的工作就完事了，另外需要说一点就是：我在构造MKAnnotationView的时候没有使用类似UITableView构造Cell的复用机制（暂时没问题，但是annotation很多的时候也许会影响性能），原因是复用后在移动地图时annotationView的顺序会错乱，暂时没找到原因，谁有解决办法请留言说明，谢谢~
