iOS 系统自带API地图开发相关(二)

地图-自定义大头针

自定义大头针.png

关于大头针视图分两类:

MKPinAnnotationView : apple自带的大头针,可设置针头颜色和添加从天而降的效果.
它是MKAnnotationView的子类（不能改变大头针视图的图片，可以改变颜色）

MKAnnotationView: 创建以静态图片作为大头针图片,如上图

---

使用MKPinAnnotationView创建添加大头针我们就不多说, 那么下面我们主要讲MKAnnotationView是如何创建添加大头针的.

大头针在地图上的展示：

①MKAnnotationView 类似cell
②MKAnnotation 类似表视图里面的model
③- (nullable MKAnnotationView *)mapView:(MKMapView *)mapView viewForAnnotation:(id <MKAnnotation>)annotation 类似初始化cell的地方
④如果只添加了annotation 会自动添加一个大头针视图 pinAnnotationView

- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
    //我们只需要添加大头针模型，剩下的就由系统帮我们做好
    //1.创建大头针模型
    //MKAnnotation *an = [[MKAnnotation alloc] init];  //这地方需要注意
    
    HMAnnotation *annotation = [[HMAnnotation alloc] init];
    //2.获取在屏幕上的点击位置
    UITouch *touch = [touches anyObject];
    //2.1 获取坐标点
    CGPoint point = [touch locationInView:self.mapView];
    //2.2 将UIKit的坐标点,转成经纬度
    CLLocationCoordinate2D coordinate = [self.mapView convertPoint:point toCoordinateFromView:self.mapView];
    
    //3.设置大头针相关属性(设置坐标)
    annotation.coordinate = coordinate;
    //3.1 设置大头针的标题
    annotation.title = @"夜黑风高我来也";
    annotation.subtitle = @"西门吹雪战队";
    
    //4.添加大头针模型
    [self.mapView addAnnotation:annotation];
}

这边是点击添加大头针,下面是从服务器获取数据到数组添加大头针

for (int i = 0; i < _fDataArray.count; i++) {
        ResModel *model = _fDataArray[i];
        CLLocationCoordinate2D center = CLLocationCoordinate2DMake([[model.loc objectForKey:@"lat"] doubleValue],[[model.loc objectForKey:@"lon"] doubleValue]);
        MKPointAnnotation *pinAnnotation = [[MKPointAnnotation alloc] init];
        pinAnnotation.coordinate = center;
        pinAnnotation.title = model.name;
        [_mapView addAnnotation:pinAnnotation];
    }

这个地方需要注意了,不能直接使用MKAnnotation创建大头针模型, MKAnnotation 是一个协议, 而不是具体的类, 我们在创建大头针对象类时, 必须遵循该协议.所以:

1.创建大头针模型有两种方法:

1.使用遵守MKAnnotation协议的MKShape子类MKPointAnnotation创建大头针模型

2.自定义HMAnnotation大头针模型类,继承NSObject,遵守MKAnnotation协议,然后创建大头针模型

HMAnnotation.h

#import <Foundation/Foundation.h>
#import <MapKit/MapKit.h>

@interface HMAnnotation : NSObject<MKAnnotation>

@property (nonatomic) CLLocationCoordinate2D coordinate;
@property (nonatomic, copy, nullable) NSString *title;
@property (nonatomic, copy, nullable) NSString *subtitle;

@end

HMAnnotation.m

#import "HMAnnotation.h"

@implementation HMAnnotation

@end

2.使用MKAnnotationView有从天而降的效果

// 已经添加了大头针模型,还没有完全渲染出来之前(mapView的代理)
- (void)mapView:(MKMapView *)mapView didAddAnnotationViews:(NSArray<MKAnnotationView *> *)views{
    for (MKAnnotationView *annotationView in views) {
        //目标位置
        CGRect targetRect = annotationView.frame;
        //先让其在最顶上
        annotationView.frame = CGRectMake(targetRect.origin.x, 0, targetRect.size.width, targetRect.size.height);
        //最后通过动画展示到最终的目标地方
        [UIView animateWithDuration:0.3 animations:^{
            annotationView.frame = targetRect;
        }];
    }
}//如果不要这种效果这段代码也可以不需要

3.大头针视图的重用,设置(关键一步)

// 大头针视图的重用,大头针也存在着重用的机制,方便优化内存
// 每次添加大头针都会调用此方法  可以设置大头针的样式
- (MKAnnotationView *)mapView:(MKMapView *)mapView viewForAnnotation:(id<MKAnnotation>)annotation{
    // 判断大头针位置是否在原点,如果是则不加大头针或者添加属于自己特殊图标
    if ([annotation isKindOfClass:[MKUserLocation class]]) { return nil; }
    //1.定义一个可重用标识符
    static NSString *reuseIdentifier = @"mapView";
    MKAnnotationView *annotationView = (MKAnnotationView *)[mapView dequeueReusableAnnotationViewWithIdentifier:reuseIdentifier];
    if (annotationView == nil) {
        annotationView = [[MKAnnotationView alloc] initWithAnnotation:annotation reuseIdentifier:reuseIdentifier];
    }
    
    //设置可重用标识符的相关属性
    // 显示标题和副标题
    annotationView.canShowCallout = YES;
    // 设置图片(用户头像,或者商品/超市/汽车/单车等等图片)
    annotationView.image = [UIImage imageNamed:@"appStore"];
   //须导入#import "UIImageView+WebCache.h"头文件
   // [annotationView.image sd_setImageWithURL:[NSURL URLWithString:[dict valueForKey:@"icon"]] placeholderImage:[UIImage imageNamed:@"默认图片"]];


    return annotationView;
}

4.搭配方案

①使用MKPointAnnotation配合自定义MKAnnotationView,
②使用自定义MKAnnotation配合系统的MKAnnotationView
当然如果你想让你的大头针更具个性化,不单一或者有GIF动图之类推荐使用第一种方案。

不过如果大头针是具有GIF图动画需要设置一下大头针模型

[_mapView showAnnotations:_mapView.annotations edgePadding:UIEdgeInsetsMake(20, 20, 20, 80) animated:YES];

5.自定义MKAnnotationView (简单)

下面将一下简单的自定义MKAnnotationView,如果有特殊需求,可在此基础上进行设置添加相关属性。

myAnnotationView.h

#import <MapKit/MapKit.h>

@interface myAnnotationView : MKAnnotationView

@property (nonatomic,strong) UILabel *label;

@end

myAnnotationView.m

#import "myAnnotationView.h"

@implementation myAnnotationView

- (instancetype)initWithAnnotation:(id<MKAnnotation>)annotation reuseIdentifier:(NSString *)reuseIdentifier{
    self = [super initWithAnnotation:annotation reuseIdentifier:reuseIdentifier];
    if (self) {
        
        //        在大头针旁边(上下左右)加一个label
        self.label = [[UILabel alloc]initWithFrame:CGRectMake(-5, -20, 60, 50)];
        self.label.textColor = [UIColor blackColor];
        self.label.textAlignment = NSTextAlignmentCenter;
        self.label.font = [UIFont systemFontOfSize:10];
        self.label.lineBreakMode = 0;
        self.label.numberOfLines = 0;
        [self addSubview:self.label];
        
    }
    return self;
}

@end

在mapView代理设置

- (MKAnnotationView *)mapView:(MKMapView *)mapView viewForAnnotation:(id<MKAnnotation>)annotation
{
    // 判断大头针位置是否在原点,如果是则不加大头针
    if([annotation isKindOfClass:[mapView.userLocation class]]){
        return nil;
    }
    //设置自定义大头针
    myAnnotationView *annotationView = (myAnnotationView *)[mapView dequeueReusableAnnotationViewWithIdentifier:@"otherAnnotationView"];
    if (annotationView == nil) {
        annotationView = [[myAnnotationView alloc]initWithAnnotation:annotation reuseIdentifier:@"otherAnnotationView"];
    }
    annotationView.image = [UIImage imageNamed:@"图标"];
    annotationView.label.text = annotation.title;
    
    return annotationView;
}

---

iOS 系统自带API地图开发相关(一)
iOS 系统自带API地图开发相关(二)
iOS 系统自带API地图开发相关(三)

---

第二节到此为止.记录下来同大家分享!!!🙂🙂🙂

我是楚简约，感谢您的阅读，

喜欢就点个赞呗，“❤喜欢”，

鼓励又不花钱，你在看，我就继续写~

非简书用户，可以点右上角的三个“...”，然后"在Safari中打开”，就可以点赞咯~

---