iOS原生地图MKMapView添加半透明遮盖物和轨迹起点、终点等自定义annotation

先看效果：

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的顺序会错乱，暂时没找到原因，谁有解决办法请留言说明，谢谢~

iOS原生地图MKMapView添加半透明遮盖物和轨迹起点、终点等自定义annotation

推荐阅读更多精彩内容