iOS开发学习之地图demo

您好、

最近假期，虾米在此期间学习了下地图的一些常用知识点。通过这样的一个分享平台，希望能提升自己。

另外虾米附上画线和定义大头针的两份小demo。

第一份Demo ——自定义大头针

demo效果图如下：

先从文件夹和main.story 整体用到的一些类和控件等。。。

等下虾米再付上一些类的具体实现方法。。。

从上面可以知道，在mian.story中，虾米在控制器添加一个MKMapView的这样一个控件,其专门用来显示地图的。并在上面添加一个事件的点击按钮,它用来添加两个大头针的。

而后的工作得导入MapKit.framework的框架 并导入主头文件#import<MapKit/MapKit.h> 

先来look一下控制器的代码实现：

//
//  JHViewController.m
//  自定义大头针
//
//  Created by cjj on 15-9-30.
//  Copyright (c) 2015年 jh.chen. All rights reserved.
//

#import "JHViewController.h"
#import <MapKit/MapKit.h>
#import "JHAnnotation.h"
#import "JHAnnotationView.h"


@interface JHViewController () <MKMapViewDelegate>
@property (weak, nonatomic) IBOutlet MKMapView *mapView;
- (IBAction)addAnnotation;

@end

@implementation JHViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    // 设置代理
    self.mapView.delegate = self;
    
    // 跟踪显示用户位置
    self.mapView.userTrackingMode = MKUserTrackingModeFollow;
    
    // 显示用户具体位置
    CLLocationCoordinate2D center = self.mapView.userLocation.location.coordinate;
    [self.mapView setCenterCoordinate:center animated:YES];
}
#pragma mark - 添加两个大头针
- (IBAction)addAnnotation
{
    JHAnnotation *anno = [[JHAnnotation alloc] init];
    anno.coordinate = CLLocationCoordinate2DMake(37, 116);
    anno.title = @"鸿";
    anno.subtitle = @"H";
    anno.icon = @"category_5";
    [self.mapView addAnnotation:anno];
    
    
    JHAnnotation *anno4 = [[JHAnnotation alloc] init];
    anno4.coordinate = CLLocationCoordinate2DMake(23, 113);
    anno4.title = @"鸿";
    anno4.subtitle = @"H";
    anno4.icon = @"category_4";
    [self.mapView addAnnotation:anno4];
}


#pragma mark - MKMapViewDelegate

-(MKAnnotationView *)mapView:(MKMapView *)mapView viewForAnnotation:(JHAnnotation *)annotation
{
    
    if(![annotation isKindOfClass:[JHAnnotation class]]) return nil;
    
    JHAnnotationView *annoView = [JHAnnotationView annotationViewWithMapView:mapView];
    annoView.annotation = annotation;
    annoView.backgroundColor = [UIColor redColor];
    return annoView;
    
}

@end

从控制器的的代码里，虾米导入一个自定义模型JHAnnotation并遵守MKAnnotation协议和一个自定义并继承自MKAnnotationView的子类JHAnnotationView 。

通过设置self.mapView代理，并显示自定义的大头针。

另外，我们有必要知道子类JHAnnotationView。 

代码如下：

//
//  JHAnnotationView.m
//  自定义大头针
//
//  Created by cjj on 15-9-30.
//  Copyright (c) 2015年 jh.chen. All rights reserved.
//

#import "JHAnnotationView.h"
#import "JHAnnotation.h"

@interface JHAnnotationView()
@property (nonatomic, weak) UIButton *redView;
@property (nonatomic, weak) UIButton *greenView;
@end

@implementation JHAnnotationView

+ (instancetype)annotationViewWithMapView:(MKMapView *)mapView
{
    static NSString *ID = @"anno";
    JHAnnotationView *annotationView =(JHAnnotationView *)[mapView dequeueReusableAnnotationViewWithIdentifier:ID];
    if (annotationView == nil) {
        annotationView = [[JHAnnotationView alloc] initWithAnnotation:nil reuseIdentifier:ID];
    }
    return annotationView;
    
}
-(id)initWithAnnotation:(id<MKAnnotation>)annotation reuseIdentifier:(NSString *)reuseIdentifier
{
    if (self = [super initWithAnnotation:annotation reuseIdentifier:reuseIdentifier]) {
//        self.backgroundColor = [UIColor greenColor];
    }
    return self;
}

/**
 *  设置一些你想要的内容在大头针上面
 */
-(void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
    
    UIButton *redView = [[UIButton alloc] init];
    [redView addTarget:self action:@selector(redClick) forControlEvents:UIControlEventTouchUpInside];
    [redView setBackgroundColor:[UIColor redColor]];
    redView.height  = 20;
    redView.width = 20;
    redView.y = - redView.height;
    redView.x = (self.width - redView.width) * 0.5;
    [self addSubview:redView];
    self.redView = redView;
    
    UIButton *greenView = [[UIButton alloc] init];
    [greenView addTarget:self action:@selector(greenClick) forControlEvents:UIControlEventTouchUpInside];
    [greenView setBackgroundColor:[UIColor greenColor]];
    greenView.height  = 20;
    greenView.width = 20;
    greenView.y = 0;
    greenView.x = 0;
    [self addSubview:greenView];
    self.greenView = greenView;
}
-(void)redClick
{
    NSLog(@"redClick");
}

-(void)greenClick
{
    NSLog(@"greenClick");
}

#pragma mark - 拦截所有的点击事件
-(UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event
{
    if (CGRectContainsPoint(self.redView.frame, point)) {
        return self.redView;
    }
    return [super hitTest:point withEvent:event];
}


-(void)setAnnotation:(JHAnnotation *)annotation
{
    [super setAnnotation:annotation];
    self.image = [UIImage imageNamed:annotation.icon];
}
@end

上面有个知识点可以学习到。

虾米通过设置两个事件按钮测试。通过点击绿色按钮能打印出红色按钮的redClick。最重要的实现代码方法是-(UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event 、拦截点击事件，并发出自己想要的点击事件或实现效果。

以上是第一个小demo。

接下来是。。

第二份小Demo  ——画线

demo的效果图如下：

至于第二份，虾米通过地理编码在广州和北京插入两个红色大头针。由于从广州到北京路线很多，我选择了通过driving的方式到达。并通过蓝色画线。还有一个导航功能，我借用的是苹果官方的高德导航。还有另一种集成百度地图导航相对其比较好，强大。不过今天就用苹果自带的好了。对于做一个导航的地图我们需要一些更多的数据。

苹果的导航的效果图如下：

看完后，我们还是要把重点放在实现代码上。

刚开始的步骤和第一份demo的前几个操作差不多的。

//
//  JHViewController.m
//  画线
//
//  Created by cjj on 15-9-30.
//  Copyright (c) 2015年 jh.chen. All rights reserved.
//

#import "JHViewController.h"
#import <MapKit/MapKit.h>
#import "JHAnnotation.h"

@interface JHViewController () <MKMapViewDelegate>
@property (weak, nonatomic) IBOutlet MKMapView *mapView;
@property (nonatomic, strong) MKPlacemark *sourceMKPm;
@property (nonatomic, strong) MKPlacemark *destinationMKPm;

/**
 *  地理编码
 */
@property (nonatomic, strong) CLGeocoder *geocoder;

/**
 *  开始导航
 */
- (IBAction)startNav;

@end

@implementation JHViewController

-(CLGeocoder *)geocoder
{
    if (_geocoder == nil) {
        self.geocoder = [[CLGeocoder alloc] init];
    }
    return _geocoder;
}


- (void)viewDidLoad
{
    [super viewDidLoad];
    
    self.mapView.delegate = self;
    
    NSString *soureAddress = @"广州";
    NSString *destinationAddress = @"北京";
    
    [self.geocoder geocodeAddressString:soureAddress completionHandler:^(NSArray *placemarks, NSError *error) {
        CLPlacemark *gzPm = [placemarks firstObject];
        if(gzPm == nil) return;
        
        // 添加广州大头针
        JHAnnotation *gzAnno = [[JHAnnotation alloc] init];
        gzAnno.coordinate = gzPm.location.coordinate;
        gzAnno.title = soureAddress;
        gzAnno.subtitle = gzPm.name;
        [self.mapView addAnnotation:gzAnno];
        
        [self.geocoder geocodeAddressString:destinationAddress completionHandler:^(NSArray *placemarks, NSError *error) {
            CLPlacemark *bjPm = [placemarks firstObject];
            if(bjPm == nil) return;
            
            // 添加北京大头针
            JHAnnotation *bjAnno = [[JHAnnotation alloc] init];
            bjAnno.coordinate = bjPm.location.coordinate;
            bjAnno.title = destinationAddress;
            bjAnno.subtitle = bjPm.name;
            [self.mapView addAnnotation:bjAnno];
            // 画线
            [self drawlineWithSourceCLPm :gzPm destinationCLPm:bjPm];
      
        }];
    }];
    
}

- (void)drawlineWithSourceCLPm :(CLPlacemark *)SourceCLPm destinationCLPm:(CLPlacemark *)destinationCLPm
{
    if(SourceCLPm == nil || destinationCLPm == nil) return;
    
    // 方向请求
    MKDirectionsRequest *request = [[MKDirectionsRequest alloc] init];

    // 设置起点
    MKPlacemark *sourceMKPm = [[MKPlacemark alloc] initWithPlacemark:SourceCLPm];
    request.source = [[MKMapItem alloc] initWithPlacemark:sourceMKPm];
    self.sourceMKPm = sourceMKPm;

    // 设置终点
    MKPlacemark *destinationMKPm = [[MKPlacemark alloc] initWithPlacemark:destinationCLPm];
    request.destination = [[MKMapItem alloc] initWithPlacemark:destinationMKPm];
    self.destinationMKPm = destinationMKPm;

    // 根据请求创建方向
    MKDirections *directions = [[MKDirections alloc] initWithRequest:request];

    // 执行请求
    [directions calculateDirectionsWithCompletionHandler:^(MKDirectionsResponse *response, NSError *error){
        for (MKRoute *route in response.routes) {
            [self.mapView addOverlay:route.polyline];
        }
    }];

}

#pragma mark - MKMapViewDelegate
- (MKOverlayRenderer *)mapView:(MKMapView *)mapView rendererForOverlay:(id<MKOverlay>)overlay
{
    MKPolylineRenderer *renderer = [[MKPolylineRenderer alloc] initWithOverlay:overlay];
    renderer.lineWidth = 5;
//    renderer.fillColor = [UIColor blueColor];
    renderer.strokeColor = [UIColor blueColor];
    return renderer;
}


- (IBAction)startNav
{
   
    if (self.sourceMKPm == nil || self.destinationMKPm == nil) return;
    // 起点
    MKMapItem *sourceItem = [[MKMapItem alloc] initWithPlacemark:self.sourceMKPm];
    // 终点
    MKMapItem *destinationItem = [[MKMapItem alloc] initWithPlacemark:self.destinationMKPm];
    // 存放起点和终点
    NSArray *items = @[sourceItem, destinationItem];
    
    NSMutableDictionary *options = [NSMutableDictionary dictionary];
    
    //导航模式：驾驶导航
    options[MKLaunchOptionsDirectionsModeKey] = MKLaunchOptionsDirectionsModeDriving;
    // 是否显示路况
    options[MKLaunchOptionsShowsTrafficKey] = @YES;
    
    //打开苹果官方的导航应用
    [MKMapItem openMapsWithItems:items launchOptions:options];
     NSLog(@"jh");
}
@end

如果您发现有什么需要加入的或者新的想法和心得，请留下您的建议。再次感谢。

虾米的联系方式：

QQ ：584837022@qq.com

微信：foreverlovewillgoon