iOS开发之地图

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

一、理论知识

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

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

showUserLocation

二、准备工作

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

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 nbsp="">
   * _Nullable placemarks, NSError * _Nullable error) {
        
        CLPlacemark *mark = placemarks.firstObject;
        
        userLocation.title = mark.locality;
        
        userLocation.subtitle = mark.thoroughfare;
  
    }];
}
@end
 </clplacemark>
</mkmapviewdelegate>

• 效果

实现效果

三、地图缩放级别

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

• 代码

@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
</mkmapviewdelegate>

• 效果

实现效果

四、添加标注

• 功能：点击屏幕，可以添加标注

• 说明：添加标注分三步

  • 创建标注模型

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

  • 将标注添加到地图

• 代码

  • 标注模型

@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
</mkannotation>

• 控制器

@interface ViewController ()
<cllocationmanagerdelegate nbsp="" 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 nbsp="">
   *)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
  </mkannotation>
 </uitouch>
</cllocationmanagerdelegate>

• 效果

实现效果

五、添加自定义标注

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

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

-(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;
    
}
</mkannotation>

• 效果

实现效果

六、案例代码

GitHub地址

作者：YungFan

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