地图篇-04.添加/删除大头针

Posted 2020-07-17 二毛

地图篇-04.添加/删除大头针

博主这几天有点事,没有更新,还望海涵.

上一小节讲到展示地图,在展示地图的过程中,显示用户位置的时候是一个蓝色小圆点,但是朋友们觉得不好看,那弱弱的问一句,能换么?

肯定是能的啦.

1.准备

创建一个新项目,在storyboard中拖一个mapView,两个button,一个添加大头针,一个删除大头针,如下:

拖好了控件之后,简单搞下自动布局,然后把这3个控件拖入viewController.m中,不要忘记导入头文件和导入框架,这个前面讲过,这里不做细讲.

2.添加单个大头针

然后,上代码:

ViewController.m

 1 //
 2 //  ViewController.m
 3 //  删除大头针
 4 //
 5 //  Created by admin on 16/5/30.
 6 //  Copyright © 2016年 KXZDJ. All rights reserved.
 7 //
 8 
 9 #import "ViewController.h"
10 #import <MapKit/MapKit.h>
11 
12 @interface ViewController ()
13 @property (weak, nonatomic) IBOutlet MKMapView *mapView;
14 
15 @end
16 
17 @implementation ViewController
18 
19 - (void)viewDidLoad {
20     [super viewDidLoad];
21     
22 }
23 
24 - (IBAction)addAnnotation:(id)sender {
25     //添加一个大头针,需要我们传一个id类型的参数,并且这个参数要遵守MKAnnotation这个协议
26     [self.mapView addAnnotation:<#(nonnull id<MKAnnotation>)#>];
27     //添加多个大头针,需要我们传一个数组,同样这个数组里面的元素也要是id类型的参数,并且这个参数也要遵守MKAnnotation这个协议
28     [self.mapView addAnnotations:<#(nonnull NSArray<id<MKAnnotation>> *)#>];
29     
30 }
31 
32 - (IBAction)deleteAnnotation:(id)sender {
33 }

 

因为不知道什么类型的参数,我们就自定义一个继承自NSObject的大头针模型,来做这个参数:

然后在MyAnnotation.h中导入头文件 #import <MapKit/MapKit.h>,在遵守<MKAnnotation>

到了这里,我们点进MKAnnotation里面去,看看有哪些要实现的方法和属性:

我们能看到有一个必须实现的属性,两个可选属性还有一个set方法,现在我们把这3个属性copy到.h文件中:

细心的朋友会发现在MKAnnotation这个协议中,这3个属性都是readOnly的,但是我们又要用,怎么办呢?把readOnly删除就好了.这里不纠结这个.

现在我们拿到这个属性了,不要多说,怎么用?看代码:

 1 //
 2 //  ViewController.m
 3 //  删除大头针
 4 //
 5 //  Created by admin on 16/5/30.
 6 //  Copyright © 2016年 KXZDJ. All rights reserved.
 7 //
 8 
 9 #import "ViewController.h"
10 #import <MapKit/MapKit.h>
11 #import "MyAnnotation.h"
12 
13 @interface ViewController ()
14 @property (weak, nonatomic) IBOutlet MKMapView *mapView;
15 
16 @end
17 
18 @implementation ViewController
19 
20 - (void)viewDidLoad {
21     [super viewDidLoad];
22     
23 }
24 
25 - (IBAction)addAnnotation:(id)sender {
26     /*
27      先创建一个大头针:
28      */
29     //创建一个大头针
30     MyAnnotation *anno = [[MyAnnotation alloc] init];
31     //设置大头针位置
32     anno.coordinate = CLLocationCoordinate2DMake(30.39, 104.05);
33     //设置大头针名称
34     anno.title = @"成都市";
35     //设置大头针描述
36     anno.subtitle = @"成都市是四川省省会,人送外号天府之国";
37     
38     
39     //添加一个大头针,需要我们传一个id类型的参数,并且这个参数要遵守MKAnnotation这个协议
40     [self.mapView addAnnotation:anno];
41     //添加多个大头针,需要我们传一个数组,同样这个数组里面的元素也要是id类型的参数,并且这个参数也要遵守MKAnnotation这个协议
42 //    [self.mapView addAnnotations:<#(nonnull NSArray<id<MKAnnotation>> *)#>];
43     
44 }
45 
46 - (IBAction)deleteAnnotation:(id)sender {
47 }
48 
49 
50 @end

运行效果,点击添加大头针:

3.添加多个大头针

直接上代码:

 1 //
 2 //  ViewController.m
 3 //  删除大头针
 4 //
 5 //  Created by admin on 16/5/30.
 6 //  Copyright © 2016年 KXZDJ. All rights reserved.
 7 //
 8 
 9 #import "ViewController.h"
10 #import <MapKit/MapKit.h>
11 #import "MyAnnotation.h"
12 
13 @interface ViewController ()
14 @property (weak, nonatomic) IBOutlet MKMapView *mapView;
15 
16 @end
17 
18 @implementation ViewController
19 
20 - (void)viewDidLoad {
21     [super viewDidLoad];
22     
23 }
24 
25 - (IBAction)addAnnotation:(id)sender {
26     /*
27      先创建一个大头针:
28      */
29     //创建一个大头针
30     MyAnnotation *anno = [[MyAnnotation alloc] init];
31     //设置大头针位置
32     anno.coordinate = CLLocationCoordinate2DMake(30.39, 104.05);
33     //设置大头针名称
34     anno.title = @"成都市";
35     //设置大头针描述
36     anno.subtitle = @"成都市是四川省省会,人送外号天府之国";
37     
38     
39     //创建一个大头针
40     MyAnnotation *anno1 = [[MyAnnotation alloc] init];
41     //设置大头针位置
42     anno1.coordinate = CLLocationCoordinate2DMake(39.54, 116.28);
43     //设置大头针名称
44     anno1.title = @"北京市";
45     //设置大头针描述
46     anno1.subtitle = @"北京市是中国政治经济文化中心";
47     
48     
49     //添加一个大头针,需要我们传一个id类型的参数,并且这个参数要遵守MKAnnotation这个协议
50 //    [self.mapView addAnnotation:anno];
51     //添加多个大头针,需要我们传一个数组,同样这个数组里面的元素也要是id类型的参数,并且这个参数也要遵守MKAnnotation这个协议
52     [self.mapView addAnnotations:@[anno,anno1]];
53     
54 }
55 
56 - (IBAction)deleteAnnotation:(id)sender {
57 }

 

运行效果图:

4.删除大头针

删除大头针的时候,也要根据你创建大头针的方法来删除,如果创建的一个,就删除一个,创建了多个,就删除数组,但是,在点击添加大头针的方法中创建的大头针,我们在删除大头针的方法中调用不了,就要定义成全局的实例变量或者写成属性,可是如果我们创建100个大头针呢?所以,这里我就用删除数组的方法来达到删除单个和多个的效果:

 1 //
 2 //  ViewController.m
 3 //  删除大头针
 4 //
 5 //  Created by admin on 16/5/30.
 6 //  Copyright © 2016年 KXZDJ. All rights reserved.
 7 //
 8 
 9 #import "ViewController.h"
10 #import <MapKit/MapKit.h>
11 #import "MyAnnotation.h"
12 
13 @interface ViewController ()
14 @property (weak, nonatomic) IBOutlet MKMapView *mapView;
15 
16 @end
17 
18 @implementation ViewController
19 
20 - (void)viewDidLoad {
21     [super viewDidLoad];
22     
23 }
24 //添加大头针
25 - (IBAction)addAnnotation:(id)sender {
26     /*
27      先创建一个大头针:
28      */
29     //创建一个大头针
30     MyAnnotation *anno = [[MyAnnotation alloc] init];
31     //设置大头针位置
32     anno.coordinate = CLLocationCoordinate2DMake(30.39, 104.05);
33     //设置大头针名称
34     anno.title = @"成都市";
35     //设置大头针描述
36     anno.subtitle = @"成都市是四川省省会,人送外号天府之国";
37     
38     
39     //创建一个大头针
40     MyAnnotation *anno1 = [[MyAnnotation alloc] init];
41     //设置大头针位置
42     anno1.coordinate = CLLocationCoordinate2DMake(39.54, 116.28);
43     //设置大头针名称
44     anno1.title = @"北京市";
45     //设置大头针描述
46     anno1.subtitle = @"北京市是中国政治经济文化中心";
47     
48     
49     //添加一个大头针,需要我们传一个id类型的参数,并且这个参数要遵守MKAnnotation这个协议
50 //    [self.mapView addAnnotation:anno];
51     //添加多个大头针,需要我们传一个数组,同样这个数组里面的元素也要是id类型的参数,并且这个参数也要遵守MKAnnotation这个协议
52     [self.mapView addAnnotations:@[anno,anno1]];
53     
54 }
55 
56 //删除大头针
57 - (IBAction)deleteAnnotation:(id)sender {
58     
59     //删除单个大头针的方法
60 //    [self.mapView removeAnnotation:self.mapView.annotations[0]];
61     //删除多个大头针的方法,用这个也可以删除单个,所以不用上面的方法
62     [self.mapView removeAnnotations:self.mapView.annotations];
63 }
64 
65 
66 @end

以上就是添加和删除大头针的操作,那么现在问题来了,要是我不喜欢这个样式的大头针呢?以及我想点击屏幕任何位置添加大头针能做到么?

能!!!

图片资源自己去收集,想换什么换什么.

下面我们就讲讲怎么点击屏幕任何位置添加大头针,以及更换大头针样式:

5.随意添加大头针\\更换大头针样式

首先,在写代码之前,理一下思路:

一>实现点击屏幕人一样地方添加大头针的思路:

5.1 要点击屏幕添加大头针,我们肯定要获取我们点击的位置,也就是坐标.

5.2 获取到我们点击的坐标之后,得把屏幕上的XY坐标转换成地理坐标吧.

5.3 转换成地理坐标之后,我们拿到coordinate这个坐标,是不是就可以添加大头针了.

我们知道点击屏幕会触发touchBegan这个方法,所以我们就在这个方法中写,代码:

 1 //点击屏幕的时候调用
 2 -(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
 3     //1.获取屏幕坐标
 4     CGPoint touchLocation = [[touches anyObject] locationInView:self.mapView];
 5     //2.屏幕坐标转换为地理坐标
 6     CLLocationCoordinate2D coordinate = [self.mapView convertPoint:touchLocation toCoordinateFromView:self.mapView];
 7     //3.添加大头针
 8     //创建一个大头针
 9     MyAnnotation *anno = [[MyAnnotation alloc] init];
10     //设置大头针位置
11     anno.coordinate = coordinate;
12     [self.mapView addAnnotation:anno];
13 }

运行效果图:

二>实现更改大头针样式

这里就要用到mapView的代理方法了,很简单,不多说,上代码上图:

MyAnnotation.h

 1 //
 2 //  MyAnnotation.h
 3 //  删除大头针
 4 //
 5 //  Created by admin on 16/5/30.
 6 //  Copyright © 2016年 KXZDJ. All rights reserved.
 7 //
 8 
 9 #import <Foundation/Foundation.h>
10 #import <MapKit/MapKit.h>
11 
12 @interface MyAnnotation : NSObject<MKAnnotation>
13 
14 @property (nonatomic) CLLocationCoordinate2D coordinate;
15 
16 @property (nonatomic, copy) NSString *title;
17 
18 @property (nonatomic, copy) NSString *subtitle;
19 /**
20  *  大头针样式
21  */
22 @property (nonatomic, copy) NSString *icon;
23 
24 @end

ViewController.m

  1 //
  2 //  ViewController.m
  3 //  删除大头针
  4 //
  5 //  Created by admin on 16/5/30.
  6 //  Copyright © 2016年 KXZDJ. All rights reserved.
  7 //
  8 
  9 #import "ViewController.h"
 10 #import <MapKit/MapKit.h>
 11 #import "MyAnnotation.h"
 12 
 13 @interface ViewController ()<MKMapViewDelegate>
 14 @property (weak, nonatomic) IBOutlet MKMapView *mapView;
 15 
 16 @end
 17 
 18 @implementation ViewController
 19 
 20 - (void)viewDidLoad {
 21     [super viewDidLoad];
 22     //设置代理
 23     self.mapView.delegate = self;
 24     
 25 }
 26 //添加大头针
 27 - (IBAction)addAnnotation:(id)sender {
 28     /*
 29      先创建一个大头针:
 30      */
 31     //创建一个大头针
 32     MyAnnotation *anno = [[MyAnnotation alloc] init];
 33     //设置大头针位置
 34     anno.coordinate = CLLocationCoordinate2DMake(30.39, 104.05);
 35     //设置大头针名称
 36     anno.title = @"成都市";
 37     //设置大头针描述
 38     anno.subtitle = @"成都市是四川省省会,人送外号天府之国";
 39     //设置大头针样式
 40     anno.icon = @"category_2";
 41     
 42     
 43     //创建一个大头针
 44     MyAnnotation *anno1 = [[MyAnnotation alloc] init];
 45     //设置大头针位置
 46     anno1.coordinate = CLLocationCoordinate2DMake(39.54, 116.28);
 47     //设置大头针名称
 48     anno1.title = @"北京市";
 49     //设置大头针描述
 50     anno1.subtitle = @"北京市是中国政治经济文化中心";
 51     //设置大头针样式
 52     anno1.icon = @"category_1";
 53     
 54     
 55     //添加一个大头针,需要我们传一个id类型的参数,并且这个参数要遵守MKAnnotation这个协议
 56 //    [self.mapView addAnnotation:anno];
 57     //添加多个大头针,需要我们传一个数组,同样这个数组里面的元素也要是id类型的参数,并且这个参数也要遵守MKAnnotation这个协议
 58     [self.mapView addAnnotations:@[anno,anno1]];
 59     
 60 }
 61 
 62 //删除大头针
 63 - (IBAction)deleteAnnotation:(id)sender {
 64     
 65     //删除单个大头针的方法
 66 //    [self.mapView removeAnnotation:self.mapView.annotations[0]];
 67     //删除多个大头针的方法,用这个也可以删除单个,所以不用上面的方法
 68     [self.mapView removeAnnotations:self.mapView.annotations];
 69 }
 70 
 71 
 72 //点击屏幕的时候调用
 73 -(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
 74     //1.获取屏幕坐标
 75     CGPoint touchLocation = [[touches anyObject] locationInView:self.mapView];
 76     //2.屏幕坐标转换为地理坐标
 77     CLLocationCoordinate2D coordinate = [self.mapView convertPoint:touchLocation toCoordinateFromView:self.mapView];
 78     //3.添加大头针
 79     //创建一个大头针
 80     MyAnnotation *anno = [[MyAnnotation alloc] init];
 81     //设置大头针位置
 82     anno.coordinate = coordinate;
 83     [self.mapView addAnnotation:anno];
 84 }
 85 
 86 
 87 
 88 #pragma mark - mapViewDelegate -
 89 /**
 90  *  添加大头针的时候调用
 91  *
 92  *  @param mapView    当前mapView
 93  *  @param annotation 大头针样式
 94  *
 95  *  @return 返回大头针的样式
 96  */
 97 -(MKAnnotationView*)mapView:(MKMapView *)mapView viewForAnnotation:(MyAnnotation *)annotation {
 98    
 99    100        101 102     
103     static NSString *ID = @"anno";
104     //创建MKAnnotationView的方式(因为这个方法返回一个MKAnnotationView,所以我们创建一个MKAnnotationView,创建方式类似于tableView的创建)
105     MKAnnotationView *annotationView = [mapView dequeueReusableAnnotationViewWithIdentifier:ID];
106     
107     //判断如果没有大头针视图
108     if (!annotationView) {
109         //那么就创建一个新的视图
110         annotationView = [[MKAnnotationView alloc] initWithAnnotation:annotation reuseIdentifier:ID];
111     }
112     
113     
114     //自定义大头针图片
115     annotationView.image = [UIImage imageNamed:annotation.icon];
116     
117     
118     return annotationView;
119     
120     
121     //如果返回nil,就会使用系统自带的样式
122 //    return nil;
123 }
124 
125 
126 
127 @end

在上面的代理方法中,我把annotation的类型改成了我自己定义的类型:

运行效果图:

 

以上是添加/删除大头针,已经点击屏幕任意位置添加大头针和更改大头针样式的讲解,后面可能还会对这方面的知识做一个补充,相当于进阶.如有遗漏或错误,烦请指正.