欢迎关注
最酷最in的云资讯

iOS开发之地图

在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 ()//地图 很多属性都在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 * _Nullable placemarks, NSError * _Nullable error) {                CLPlacemark *mark = placemarks.firstObject;                userLocation.title = mark.locality;                userLocation.subtitle = mark.thoroughfare;      }];}@end
  • 效果

735757-74c442392dc00da8.gif

实现效果

三、地图缩放级别

  • 实现功能:在之前功能的基础上实现地图的任意视角(“缩放级别”)
  • 代码
@interface ViewController ()@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 /** *  大头针的位置 */@property (nonatomic, assign) CLLocationCoordinate2D coordinate;/** *  主标题 */@property (nonatomic,  copy, nullable) NSString *title;/** *  副标题 */@property (nonatomic,  copy, nullable) NSString *subtitle;- (void)setCoordinate:(CLLocationCoordinate2D)newCoordinate;@end
  • 控制器
@interface ViewController ()@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 *)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)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)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.swifty.cc/p/e13bf5b232b1

赞(0) 打赏
未经允许不得转载:云微资讯 » iOS开发之地图
分享到: 更多 (0)

云微资讯 科技新媒体资讯平台

关于我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏