iOS学习笔记20-地图(二)MapKit框架

一、地图开发介绍

从iOS6.0开始地图数据不再由谷歌驱动,而是改用自家地图,当然在国内它的数据是由高德地图提供的。

在iOS中进行地图开发主要有三种方式:
  • 利用MapKit框架进行地图开发,利用这种方式可以对地图进行精准的控制
  • 调用苹果官方自带的地图应用,主要用于一些简单的地图应用,无法精确控制
  • 使用第三方地图开发SDK库

用得最多的还是MapKit,所以这节就只讲MapKit的使用。

二、MapKit核心类

MapKit的核心类为地图展示控件MKMapView,以下是常用的属性、对象方法以及代理方法。

1. 属性:

/* 用户位置跟踪 */
@property (nonatomic) BOOL showsUserLocation;/*< 是否在地图上标注用户位置 */
@property (nonatomic, readonly) MKUserLocation *userLocation;/*< 用户位置 */
@property (nonatomic) MKUserTrackingMode userTrackingMode;/*< 用户跟踪类型 */
typedef NS_ENUM(NSInteger, MKUserTrackingMode) {
    MKUserTrackingModeNone = 0, /*< 不跟踪 */
    MKUserTrackingModeFollow, /*< 跟踪 */
    MKUserTrackingModeFollowWithHeading,  /*< 导航跟踪 */
};
/* 设置地图配置项 */
@property (nonatomic) MKMapType mapType;/*< 地图类型 */
@property (nonatomic, readonly) NSArray *annotations;/*< 大头针数组 */
typedef NS_ENUM(NSUInteger, MKMapType) {
    MKMapTypeStandard = 0,/*< 标准地图 */
    MKMapTypeSatellite,/*< 卫星地图 */
    MKMapTypeHybrid,/*< 混合模式(标准+卫星) */
    MKMapTypeSatelliteFlyover,/*< 3D立体卫星(iOS9.0) */
    MKMapTypeHybridFlyover,/*< 3D立体混合(iOS9.0) */
}
/* 设置地图控制项 */
@property (nonatomic) BOOL zoomEnabled;/*< 是否可以缩放 */
@property (nonatomic) BOOL scrollEnabled;/*< 是否可以滚动 */
@property (nonatomic) BOOL rotateEnabled;/*< 是否可以旋转 */
@property (nonatomic) BOOL pitchEnabled;/*< 是否显示3D视角 */
/* 设置地图显示项 */
@property (nonatomic) BOOL showsBuildings;/*< 是否显示建筑物,只影响标准地图 */
@property (nonatomic) BOOL showsTraffic;/*< 是否显示交通,iOS9 */
@property (nonatomic) BOOL showsCompass;/*< 是否显示指南针,iOS9 */
@property (nonatomic) BOOL showsScale;/*< 是否显示比例尺,iOS9 */

所谓大头针就是地图上显示的这个标注:


大头针图片

2. 对象方法:

/* 添加大头针 */
- (void)addAnnotation:(id <MKAnnotation>)annotation;
- (void)addAnnotations:(NSArray<id<MKAnnotation>> *)annotations;
/* 删除大头针 */
- (void)removeAnnotation:(id <MKAnnotation>)annotation;
- (void)removeAnnotations:(NSArray<id<MKAnnotation>> *)annotations;
/* 选中大头针与取消选中大头针 */
- (void)selectAnnotation:(id <MKAnnotation>)annotation 
                animated:(BOOL)animated;
- (void)deselectAnnotation:(id <MKAnnotation>)annotation 
                  animated:(BOOL)animated;
/* 获取大头针视图 */
- (MKAnnotationView *)viewForAnnotation:(id <MKAnnotation>)annotation;
/* 从缓冲池中取出大头针视图控件 */
- (MKAnnotationView *)dequeueReusableAnnotationViewWithIdentifier:(NSString *)identifier;
/* 设置显示区域以及地图中心坐标 */
- (void)setRegion:(MKCoordinateRegion)region 
         animated:(BOOL)animated;
- (void)setCenterCoordinate:(CLLocationCoordinate2D)coordinate 
                   animated:(BOOL)animated;
/* 经纬度坐标转UIKit坐标,UIKit坐标转经纬度坐标 */
- (CGPoint)convertCoordinate:(CLLocationCoordinate2D)coordinate 
               toPointToView:(UIView *)view;
- (CLLocationCoordinate2D)convertPoint:(CGPoint)point 
                  toCoordinateFromView:(UIView *)view;

3. 常用代理方法MKMapViewDelegate

/* 地图加载完成会调用 */
- (void)mapViewDidFinishLoadingMap:(MKMapView *)mapView;
/* 地图加载失败会调用 */
- (void)mapViewDidFailLoadingMap:(MKMapView *)mapView withError:(NSError *)error;
/* 用户位置发生改变会调用 */
- (void)mapView:(MKMapView *)mapView didUpdateUserLocation:(MKUserLocation *)userLocation;
/* 显示区域改变会调用 */
- (void)mapView:(MKMapView *)mapView regionDidChangeAnimated:(BOOL)animated;
/* 点击选中大头针时会调用 */
- (void)mapView:(MKMapView *)mapView didSelectAnnotationView:(MKAnnotationView *)view;
/* 取消选中大头针时会调用 */
- (void)mapView:(MKMapView *)mapView didDeselectAnnotationView:(MKAnnotationView *)view;
/* 显示地图上的大头针,功能类似于UITableView的tableView:cellForRowAtIndexPath:方法 */
- (MKAnnotationView *)mapView:(MKMapView *)mapView viewForAnnotation:(id<MKAnnotation>)annotation;

三、MapKit使用

1. 首先添加头文件:

#import <MapKit/MapKit.h>

2. 初始化地图展示控件MKMapView

- (void)initMapView{
    CGFloat x = 0;
    CGFloat y = 20;
    CGFloat width = self.view.frame.size.width;
    CGFloat height = self.view.frame.size.height;
    //创建MKMapView,设置控件视图大小
    MKMapView *mapView = [[MKMapView alloc] initWithFrame:CGRectMake(x, y, width, height)];
    //设置地图类型
    mapView.mapType = MKMapTypeStandard;
    //设置代理
    mapView.delegate = self;
    [self.view addSubview:mapView];
    self.mapView = mapView;
}

3. 用户位置跟踪

在iOS8之前,实现这个功能只需要:
  1. 设置用户跟踪模式
  1. mapView:DidUpdateUserLocation:代理方法中设置地图中心和显示范围
在iOS8之后,用法稍有不同:
  1. 必须按照前面的定位章节的,获取前台或者前后台的定位服务授权,下面是链接:
    iOS学习笔记19-地图(一)定位CoreLocation
  1. 不需要进行中心点的指定,默认会将当前位置设置为中心点并自动显示区域范围
  2. 只有定位到当前位置后mapView:DidUpdateUserLocation:代理方法才会调用
- (void)viewDidLoad {
    [super viewDidLoad];
    //获取定位服务授权
    [self requestUserLocationAuthor];
    //初始化MKMapView
    [self initMapView];
}
- (void)requestUserLocationAuthor{
    //如果没有获得定位授权,获取定位授权请求
    self.locationM = [[CLLocationManager alloc] init];
    if ([CLLocationManager locationServicesEnabled]) {
        if ([CLLocationManager authorizationStatus] != kCLAuthorizationStatusAuthorizedWhenInUse) {
            [self.locationM requestWhenInUseAuthorization];
        }
    }
}
- (void)initMapView{
    CGFloat x = 0;
    CGFloat y = 20;
    CGFloat width = self.view.frame.size.width;
    CGFloat height = self.view.frame.size.height;
    //创建MKMapView对象
    MKMapView *mapView = [[MKMapView alloc] initWithFrame:CGRectMake(x, y, width, height)];
    //设置地图类型
    mapView.mapType = MKMapTypeStandard;
    //设置用户跟踪模式
    mapView.userTrackingMode = MKUserTrackingModeFollow;
    mapView.delegate = self;
    [self.view addSubview:mapView];
    self.mapView = mapView;
}
#pragma mark - MKMapViewDelegate
/* 更新用户位置会调用 */
- (void)mapView:(MKMapView *)mapView didUpdateUserLocation:(MKUserLocation *)userLocation{
    CLLocation *location = userLocation.location;
    CLLocationCoordinate2D coordinate = location.coordinate;
    NSLog(@"经度:%f,纬度:%f",coordinate.latitude,coordinate.longitude);
}
用户位置跟踪

4. 添加大头针

MapKit没有自带的大头针,只有大头针协议MKAnnotation,我们需要自定义大头针:

  1. 创建一个继承NSObject的类
  1. 实现MKAnnotation协议
  2. 必须创建一个属性,用于存储大头针位置
@property (nonatomic) CLLocationCoordinate2D coordinate;
下面就是我简单创建的LTAnnotation类:
#import <Foundation/Foundation.h>
#import <MapKit/MapKit.h>

@interface LTAnnotation : NSObject <MKAnnotation>
/* 必须创建的属性 */
@property (nonatomic) CLLocationCoordinate2D coordinate;
/* 可选的属性 */
@property (nonatomic, copy) NSString *title;
@property (nonatomic, copy) NSString *subtitle;
/* 自定义的属性 */
@property (nonatomic, strong) UIImage *icon;
@end

@implementation LTAnnotation
@end
下面是实际的使用:
- (void)viewDidLoad {
    [super viewDidLoad];
    //请求定位授权
    [self requestUserLocationAuthor];
    //初始化MKMapView
    [self initMapView];
    //添加大头针
    [self addAnnotationsToMapView];
}
- (void)addAnnotationsToMapView{
    CLLocationCoordinate2D location1 = CLLocationCoordinate2DMake(22.54, 114.02);
    //创建大头针
    LTAnnotation *annotation = [[LTAnnotation alloc] init];
    annotation.title = @"执着";
    annotation.subtitle = @"执着哥开的店";
    annotation.coordinate = location1;
    annotation.icon = [UIImage imageNamed:@"red"];
    //添加大头针
    [self.mapView addAnnotation:annotation1];
}
大头针在地图上的显示
点击大头针显示

5. 自定义大头针视图

上面的大头针样子是不是很丑,那是MKMapView的默认样式大头针视图MKAnnotationView,我们先来了解下它的常用属性:

@property (nonatomic, strong) id<MKAnnotation> annotation;/*< 大头针数据 */
@property (nonatomic, strong) UIImage *image;/*< 大头针的图标 */
@property (nonatomic, readonly) NSString *reuseIdentifier;/*< 大头针的唯一标示 */
@property (nonatomic) CGPoint calloutOffset;/*< 弹出视图的偏移 */
@property (nonatomic) BOOL selected;/*< 是否选中 */
@property (nonatomic) BOOL canShowCallout;/*< 是否能点击弹出视图 */
@property (nonatomic, strong) UIView *leftCalloutAccessoryView;/*< 弹出视图左边的视图 */
@property (nonatomic, strong) UIView *rightCalloutAccessoryView;/*< 弹出视图右边的视图 */
下面是通过设置MKAnnotationView的属性,自定义大头针视图:
/* 每当大头针显示在可视界面上时,就会调用该方法,用户位置的蓝色点也是个大头针,也会调用 */
- (MKAnnotationView *)mapView:(MKMapView *)mapView viewForAnnotation:(id<MKAnnotation>)annotation
{
    if ([annotation isKindOfClass:[LTAnnotation class]]) {
        LTAnnotation *annotationLT = (LTAnnotation *)annotation;
        //类似于UITableViewCell的重用机制,大头针视图也有重用机制
        static NSString *key = @"AnnotationIdentifier";
        MKAnnotationView *view = [self.mapView dequeueReusableAnnotationViewWithIdentifier:key];
        if (!view) {
            view = [[MKAnnotationView alloc] initWithAnnotation:annotation
                                                reuseIdentifier:key];
        }
        //设置大头针数据
        view.annotation = annotation;
        //自定义大头针默认是NO,表示不能弹出视图,这里让大头针可以点击弹出视图
        view.canShowCallout = YES;
        //设置大头针图标
        view.image = annotationLT.icon;
        //设置弹出视图的左边视图
        UIImage *leftImage = [UIImage imageNamed:@"cafeIcon"];
        UIImageView *leftView = [[UIImageView alloc] initWithImage: leftImage];
        leftView.bounds = CGRectMake(0, 0, 50, 50);
        view.leftCalloutAccessoryView = leftView;
        //设置弹出视图的右边视图
        UIImage *rightImage = [UIImage imageNamed:@"cafeRight"];
        UIImageView *rightView = [[UIImageView alloc] initWithImage: rightImage];
        rightView.bounds = CGRectMake(0, 0, 50, 50);
        view.rightCalloutAccessoryView = rightView;
        return view;
    }
    //返回nil,表示显示默认样式
    return nil;
}
改变默认样式的大头针视图

四、扩展--自定义大头针弹出详情视图

如果你去关注下一些地图应用,会发现他们的弹出视图和我们的完全不一样,那是怎么实现的呢?

实际上那不是弹出视图,那是个大头针,只是这个大头针做得和弹出视图很像而已。

实现思路:
  1. 当点击普通的大头针时,移除地图上其他的详情大头针,添加当前大头针的详情大头针
  2. 当普通大头针取消选中时,移除地图上所有的详情大头针
  3. mapView:viewForAnnotation:方法中设置普通大头针视图和详情大头针视图
下面是实现的部分代码【实现效果比较随便,见谅】:
#pragma mark - 地图控件代理方法
/* 显示大头针时调用,注意方法中的annotation参数是即将显示的大头针对象 */
-(MKAnnotationView *)mapView:(MKMapView *)mapView viewForAnnotation:(id<MKAnnotation>)annotation{
    //由于当前位置的标注也是一个大头针,所以此时需要判断,此代理方法返回nil使用默认大头针视图
    if ([annotation isKindOfClass:[LTAnnotation class]]) {
        static NSString *key1 = @"AnnotationKey1";
        MKAnnotationView *annotationView = [_mapView dequeueReusableAnnotationViewWithIdentifier:key1];
        //如果缓存池中不存在则新建
        if (!annotationView) {
            annotationView = [[MKAnnotationView alloc] initWithAnnotation:annotation
                                                          reuseIdentifier:key1];
            annotationView.canShowCallout = NO;//不允许弹出视图,但可以被选中
        }
        //重新设置此类大头针视图的大头针模型(因为有可能是从缓存池中取出来的,位置是放到缓存池时的位置)
        annotationView.annotation = annotation;
        annotationView.image = ((LTAnnotation *)annotation).icon;//设置大头针视图的图片
        return annotationView;
    }else if([annotation isKindOfClass:[LTCalloutAnnotation class]]){
        static NSString *key2 = @"AnnotationCallOutKey2";
        MKAnnotationView *calloutView = [_mapView dequeueReusableAnnotationViewWithIdentifier:key2];
        //如果缓存池中不存在则新建
        if (!calloutView) {
            calloutView = [[MKAnnotationView alloc] initWithAnnotation:annotation
                                                       reuseIdentifier:key2];
            calloutView.canShowCallout = NO;//不允许弹出视图,但可以被选中
        }
        //对于作为弹出详情视图的自定义大头针视图无弹出交互功能,在其中可以自由添加其他视图
        calloutView.annotation = annotation;
        //设置详情大头针的偏移位置
        calloutView.centerOffset = CGPointMake(-50, -80);
        [self calloutAddSubView:calloutView];
        return calloutView;
    } else {
        return nil;
    }
}

上面我的LTCalloutAnnotation和LTAnnotation实际上是只是类名不同而已,属性都一样。

#pragma mark 添加弹出视图的子控件,这里我就很随便了,你可以搞得好看点
- (void)calloutAddSubView:(MKAnnotationView *)calloutView
{
    //添加背景
    UIView *background = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 60)];
    background.backgroundColor = [UIColor whiteColor];
    background.layer.borderWidth = 5;
    background.layer.borderColor = [UIColor blueColor].CGColor;
    [calloutView addSubview:background];
    //添加图片
    UIImage *image = [UIImage imageNamed:@"cafeRight"];
    UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
    imageView.frame = CGRectMake(5, 5, 50, 50);
    [calloutView addSubview:imageView];
    //添加一个红色方块
    UIView *subview = [[UIView alloc] initWithFrame:CGRectMake(60, 5, 35, 40)];
    subview.backgroundColor = [UIColor redColor];
    [calloutView addSubview:subview];
}

#pragma mark 选中大头针时触发
//点击一般的大头针KCAnnotation时添加一个大头针作为所点大头针的弹出详情视图
-(void)mapView:(MKMapView *)mapView didSelectAnnotationView:(MKAnnotationView *)view{
    if ([view.annotation isKindOfClass:[LTAnnotation class]]) {
        LTAnnotation *annotation = view.annotation;
        //点击一个大头针时移除其他弹出详情视图
        [self removeCalloutAnnotation];
        //添加详情大头针
        LTCalloutAnnotation *callout = [[LTCalloutAnnotation alloc] init];
        callout.icon = annotation.icon;
        callout.title = annotation.title;
        callout.subtitle = annotation.subtitle;
        callout.coordinate = annotation.coordinate;
        [self.mapView addAnnotation:callout];
    }
}
#pragma mark 取消选中时触发
-(void)mapView:(MKMapView *)mapView didDeselectAnnotationView:(MKAnnotationView *)view{
    [self removeCalloutAnnotation];
}
#pragma mark 移除所用详情大头针
-(void)removeCalloutAnnotation{
    [self.mapView.annotations enumerateObjectsUsingBlock:^(id obj,NSUInteger idx,BOOL *stop){
        if ([obj isKindOfClass:[LTCalloutAnnotation class]]) {
            [_mapView removeAnnotation:obj];
        }
    }];
}
自定义弹出视图的效果图

这个自定义弹出详情视图,我做的比较简陋,我主要是为了好说明具体是怎么实现的,你可以把弹出界面做的好看点,顺便把一些大头针视图进行下封装,那一切就很完美了,O(∩_∩)O哈!这种实现是很低效的,每次都需要遍历所有的大头针,从中找到详情大头针,需要优化的地方很多,可以自己去想着优化。

如果有什么意见请在下方评论区写出来,求关注,求打赏,O(∩_∩)O哈!
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 160,227评论 4 364
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,755评论 1 298
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,899评论 0 244
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,257评论 0 213
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,617评论 3 288
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,757评论 1 221
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,982评论 2 315
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,715评论 0 204
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,454评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,666评论 2 249
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,148评论 1 261
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,512评论 3 258
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,156评论 3 238
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,112评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,896评论 0 198
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,809评论 2 279
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,691评论 2 272

推荐阅读更多精彩内容