美文网首页iOS精学选辑Ios上海快风信息科技有限公司
iOS原生地图MKMapView添加半透明遮盖物和轨迹起点、终点

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

作者: 踢足球的程序员 | 来源:发表于2016-09-13 16:33 被阅读1749次

    先看效果:

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

    相关文章

      网友评论

      • hope20:请问下地图道路颜色 如何改成白色
      • 不要动:你们是怎么截图的呢
        不要动:@ios新手 截图只有起点,没有终点
        不要动:@柠檬跑步 分享截图啊,我做的截图不全,
        踢足球的程序员:@ios新手 分享截图还是哪块的截图 没太明白
      • yadong:想请教一下,你们是怎么纪录保存运动轨迹,并将运动轨迹上传到服务器的啊?
        踢足球的程序员:@a814eb05f210 轨迹就是坐标点的array 用的是coredata存本地 上传到服务器也一样 序列化成json传
      • SAW_:请问检测GPS信号强度的话,都是推荐用horizontalAccuracy这个水平精度来判断,那么对于这个数值的划分,博主是以什么数值区间来划分强度等级的?
        踢足球的程序员:@SAW 这是我们的判断,仅供参考,暂时还没找到一个官方的标准
        #pragma mark - GPS图片信号强度判断
        - (UIImage *)GPSStrengthWithLocation:(CLLocation *)location{
        //默认图片 搜索中
        CLLocationAccuracy horizontalAccuracy = location.horizontalAccuracy;

        if(horizontalAccuracy<0){
        //无信号
        return [UIImage imageNamed:@"GPS_0"];
        }else if(horizontalAccuracy>=200){
        //信号微弱(一格)
        return [UIImage imageNamed:@"GPS_1"];
        }else if(horizontalAccuracy>=50&&horizontalAccuracy<200){
        //信号弱(两格)
        return [UIImage imageNamed:@"GPS_2"];
        }else if(horizontalAccuracy>=10&&horizontalAccuracy<50){
        //信号中(三格)
        return [UIImage imageNamed:@"GPS_3"];
        }else if(horizontalAccuracy>=0&&horizontalAccuracy<10){
        //信号强(四格)
        return [UIImage imageNamed:@"GPS_4"];
        }else{
        return [UIImage imageNamed:@"GPS_s"];
        }
        }
      • 41cf853949de:学习了

      本文标题:iOS原生地图MKMapView添加半透明遮盖物和轨迹起点、终点

      本文链接:https://www.haomeiwen.com/subject/mmbmettx.html