iOS开发之地图

YungFan 2019-04-30 11:25:19 1121

在iOS开发中,地图也是很多App都需要使用的功能。本文主要对iOS中的地图知识点进行介绍。需要说明的是地图看似很复杂,其实它仅仅是一个控件,就和UIButton、UITableView等一样。本文代码环境为:Xcode 10.2。

一、理论知识

地图既然是控件,就可以在StoryBoard和代码中使用

地图上如果想要显示用户的位置,必须与定位配合,那么就需要创建定位管理器、设置权限等,可以参考iOS开发之定位,同时需要设置地图的属性(代码设置也可以)如下图

image.png

showUserLocation

二、准备工作

1.拖拽一个地图到控制器View中

image.png

StoryBoard中添加地图控件

2.拖拽IBOutlet

3.声明CLLocationManager

4.声明权限

5.设置gpx数据

二、地图基本使用

  • 实现功能:显示地图,并且显示用户所在的位置,点击用户的位置,显示一个气泡展示用户的位置信息

  • 代码

@interface ViewController ()<MKMapViewDelegate>

//地图 很多属性都在SB中配置了
@property (weak, nonatomic) IBOutlet MKMapView *map;

@property (strong, nonatomic) CLLocationManager *manager;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    [self showUserInfo];
    
}

// 如果想显示用户的位置 只需要下面三行代码
-(void)showUser{
    
    _manager = [[CLLocationManager alloc]init];
    
    [_manager requestAlwaysAuthorization];
    
    _map.userTrackingMode = MKUserTrackingModeFollowWithHeading;
    
}

// 改变用户蓝点点击后的气泡信息
-(void)showUserInfo{
    
    _map.delegate = self;
    
    [self showUser];
    
}


//通过代理改变userLocation的标题实现更改信息
- (void)mapView:(MKMapView *)mapView didUpdateUserLocation:(MKUserLocation *)userLocation{
    
   
    CLLocation *location =  userLocation.location;
    
    CLGeocoder *geocoder = [[CLGeocoder alloc]init];
    
    [geocoder reverseGeocodeLocation:location completionHandler:^(NSArray<CLPlacemark *> * _Nullable placemarks, NSError * _Nullable error) {
        
        CLPlacemark *mark = placemarks.firstObject;
        
        userLocation.title = mark.locality;
        
        userLocation.subtitle = mark.thoroughfare;
  
    }];
}
@end
  • 效果

735757-74c442392dc00da8.gif

实现效果

三、地图缩放级别

  • 实现功能:在之前功能的基础上实现地图的任意视角(“缩放级别”)

  • 代码

@interface ViewController ()<MKMapViewDelegate>

@property(nonatomic, strong) CLLocationManager *manager;

@property (weak, nonatomic) IBOutlet MKMapView *map;

@end

@implementation ViewController


- (void)viewDidLoad {
    [super viewDidLoad];
   
    _manager = [[CLLocationManager alloc]init];
    
    [_manager requestAlwaysAuthorization];
    
    _map.showsUserLocation = YES;
    
    _map.delegate = self;
}

//如何通过定位到的位置 设置地图的“缩放级别”?
//通过设置地图的MKCoordinateRegion达到
-(void)mapView:(MKMapView *)mapView didUpdateUserLocation:(MKUserLocation *)userLocation{
    
    CLLocation *location = userLocation.location;
    
    //设置地图显示的“区域”
    
    //跨度,通过这个精细控制显示的地图视角
    MKCoordinateSpan span = MKCoordinateSpanMake(0.003, 0.003);
    
    //区域
    MKCoordinateRegion region = MKCoordinateRegionMake(location.coordinate, span);
    
    //让地图显示设置的区域
    [_map setRegion:region];
    
}

@end
  • 效果

735757-00890062abe64809.gif

实现效果

四、添加标注

  • 功能:点击屏幕,可以添加标注

  • 说明:添加标注分三步

    • 创建标注模型

    • 重写地图的代理方法,返回标注的样式

    • 将标注添加到地图

  • 代码

    • 标注模型

@interface MyAnnotation : NSObject <MKAnnotation>
/**
 *  大头针的位置
 */
@property (nonatomic, assign) CLLocationCoordinate2D coordinate;
/**
 *  主标题
 */
@property (nonatomic,  copy, nullable) NSString *title;
/**
 *  副标题
 */
@property (nonatomic,  copy, nullable) NSString *subtitle;
- (void)setCoordinate:(CLLocationCoordinate2D)newCoordinate;

@end
  • 控制器

@interface ViewController ()<CLLocationManagerDelegate, MKMapViewDelegate>

@property(nonatomic, strong) CLLocationManager *manager;

@property (weak, nonatomic) IBOutlet MKMapView *map;

@end

@implementation ViewController


- (void)viewDidLoad {
    [super viewDidLoad];
    
    _manager = [[CLLocationManager alloc]init];
    
    [_manager requestAlwaysAuthorization];
    
    _map.showsUserLocation = YES;
    
    _map.delegate = self;
}


//点击地图的任一位置 都可以插入一个标注,标注的标题和副标题显示的是具体位置
-(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
    
    
    //点击屏幕产生的坐标如何与地图的经纬度进行转换?
    
    //1.获取点击的坐标
    CGPoint touchPoint = [touches.anyObject locationInView:self.map];
    
    //2.将点击的坐标转换成经纬度
    CLLocationCoordinate2D coordinate =  [self.map convertPoint:touchPoint toCoordinateFromView:self.map];
    
    //3.添加标注
    MyAnnotation *annotation = [[MyAnnotation alloc]init];
    
    annotation.coordinate = coordinate;
    
    [self.map addAnnotation:annotation];
}


-(MKAnnotationView *)mapView:(MKMapView *)mapView viewForAnnotation:(id<MKAnnotation>)annotation{
    
    
    //判断是不是用户的数据模型 让用户位置的标注不一样
    if ([annotation isKindOfClass:[MKUserLocation class]]) {
        
       return  nil;
    }
    
    //1.从重用池取
    MKMarkerAnnotationView *annotationView = (MKMarkerAnnotationView *)[mapView dequeueReusableAnnotationViewWithIdentifier:@"abc"];
    
    //2.没有的时候创建
    if(annotationView == nil) {
        
        annotationView = [[MKMarkerAnnotationView alloc]initWithAnnotation:annotation reuseIdentifier:@"abc"];
        
    }
    
    return  annotationView;
}

-(void)mapView:(MKMapView *)mapView didUpdateUserLocation:(MKUserLocation *)userLocation{
    
    CLLocation *location = userLocation.location;
    
    //设置地图显示的“区域”
    
    //跨度
    MKCoordinateSpan span = MKCoordinateSpanMake(0.013, 0.013);
    
    //区域
    MKCoordinateRegion region = MKCoordinateRegionMake(location.coordinate, span);
    
    //让地图显示设置的区域
    [_map setRegion:region];
    
}

@end
  • 效果

735757-513d2daef91b71a5.gif

实现效果

五、添加自定义标注

  • 实现功能:在前面的基础上,自定义标注的样式

  • 代码:只需要更改上面的代理方法即可

-(MKAnnotationView *)mapView:(MKMapView *)mapView viewForAnnotation:(id<MKAnnotation>)annotation{
    
    //判断是不是用户的数据模型 让用户位置的标注不一样
    if ([annotation isKindOfClass:[MKUserLocation class]]) {
        
        return  nil;
    }
    
    //1.从重用池取MKAnnotationView
    MKAnnotationView *annotationView = [mapView dequeueReusableAnnotationViewWithIdentifier:@"abc"];
    
    //2.没有的时候创建
    if(annotationView == nil) {
        
        annotationView = [[MKAnnotationView alloc]initWithAnnotation:annotation reuseIdentifier:@"abc"];
        
    }
     
    //设置标注的图片
    int i =  arc4random() % 11;
    
    NSString *imgName = [NSString stringWithFormat:@"icon_map_cateid_%d", i];
    
    annotationView.image = [UIImage imageNamed:imgName];
    
    //左边视图
    annotationView.leftCalloutAccessoryView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"left"]];
    
    //右边视图
    annotationView.rightCalloutAccessoryView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"right"]];
    
    annotationView.canShowCallout = YES;
    
    return  annotationView;
    
}
  • 效果

735757-7f9ac24a6f778cd4.gif

实现效果

六、案例代码

GitHub地址

作者:YungFan

链接:https://www.jianshu.com/p/e13bf5b232b1