上一篇描述了如何自定义标记并使用，以及解析csv文件读取坐标和属性，本篇将自定义气泡（简单的tableview）进行属性的显示。MapKit自带的有大头针Annotation以及基础的气泡样式，但是涉及到具体的案例中不如自己写样式来的方便。
本篇内容：利用Xib自定义Annotation弹出气泡

具体效果：

点击Ann弹出气泡显示该点属性

一、创建Xib

创建一个新的ViewController并记得勾选create Xib按钮。完成后将在文件目录下发现.h .m .xib的文件组。利用该xib进行气泡的构建。

新建Xib组合

二、定义Xib样式

1、StoryBoard 使用

利用Xib开发的好处在于页面布局轻快简洁，熟悉StoryBorad使用后可以很轻快进行Xib开发（注意将Xib的size属性设置为Freedom，方便修改Xib的大小），如下图：

Xib页面布局，一个简单的tableview

2、控制器书写

头文件：

//
//  CallOutViewViewController.h
//  BigSpatialData
//
//  Created by Apple on 2019/10/29.
//  Copyright © 2019 zzcBjergsen. All rights reserved.
//

#import <UIKit/UIKit.h>
NS_ASSUME_NONNULL_BEGIN
@interface CallOutViewViewController : UIViewController

//this method is loaded when the proper table needed update

-(void) updatetheProperTbale:(NSMutableArray *) properArray;

@end

NS_ASSUME_NONNULL_END

实现文件：

//
//  CallOutViewViewController.m
//  BigSpatialData
//
//  Created by Apple on 2019/10/29.
//  Copyright © 2019 zzcBjergsen. All rights reserved.
//

#import "CallOutViewViewController.h"

@interface CallOutViewViewController ()<UITableViewDelegate,UITableViewDataSource>
@property (weak, nonatomic) IBOutlet UITableView *properTable;
@property (nonatomic,strong) NSMutableArray * properArray;
@end

@implementation CallOutViewViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    
    //regist the delegate of table
    _properTable.delegate = self;
    _properTable.dataSource = self;
    
    //init the self.properArray
    _properArray = [[NSMutableArray alloc] init];
    
    
}


//implent the method
-(void) updatetheProperTbale:(NSMutableArray *) properArray{  
    if (properArray) {
        _properArray = properArray;
        [_properTable reloadData];
    }    
}

#pragma mark TableViewDelegate

- (NSInteger) tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{

    if (_properArray) {
        
        return  _properArray.count;
    }
    
    return 1;
    
}

- (UITableViewCell *) tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    
    
    UITableViewCell * cell = [[UITableViewCell alloc] init];
    
    //get the string from array and regist the cell text
    NSString * cellStr = [_properArray objectAtIndex:indexPath.row];
    if (cellStr) {
        [cell.textLabel setText:cellStr];
        cell.textLabel.lineBreakMode = NSLineBreakByTruncatingMiddle;
    }else{
        [cell.textLabel setText:@"属性：无"];
    }
    cell.backgroundColor = UIColor.greenColor;
    return cell;
    
}


@end

三、外部调用
1、创建实例并设置好大小、位置、透明度

@property (nonatomic, strong) CallOutViewViewController *callOutVC;

    //set the callVC init
    
    _callOutVC = [[CallOutViewViewController alloc] initWithNibName:@"CallOutViewViewController" bundle:[NSBundle mainBundle]];
    [_callOutVC.view setFrame:CGRectMake(0, 0, _callOutVC.view.frame.size.width, _callOutVC.view.frame.size.height)];
    [_callOutVC.view setCenter:self.view.center];
    _callOutVC.view.alpha = 0.0;//先隐藏
    [_mapView addSubview:_callOutVC.view];

2、实现Annotation的点击事件委托(点击即显示属性)

-(void)mapView:(MKMapView *)mapView didSelectAnnotationView:(MKAnnotationView *)view{
    
    if ([view.reuseIdentifier  isEqual: @"Point_Annotation"]){
        PointAnnotation * Ann = view.annotation;
            //refresh the properTable in calloutVC
            [_callOutVC updatetheProperTbale:[self keyValueFromHuAnn:Ann]];
            
            //callout  the  calloutvc
            _callOutVC.view.alpha = 1.0;
            //record the ann's coord 记录Annotation的屏幕坐标 把自定义气泡放过来
            _annCoor = Ann.coordinate;
            [_callOutVC.view setCenter:[_mapView convertCoordinate:Ann.coordinate toPointToView:_mapView]];
    }
    
}

//key - value from Hurricane Ann
-(NSMutableArray *) keyValueFromHuAnn:(PointAnnotation *) Ann{
    
    NSMutableArray * keyValueArray = [[NSMutableArray alloc] init];
    
    if (Ann.hurricane) {
        NSString * date = [NSString stringWithFormat:@"Date:%@",Ann.hurricane.date];
        NSString * time = [NSString stringWithFormat:@"Time:%@",Ann.hurricane.time];
        NSString * wind = [NSString stringWithFormat:@"Wind:%@",Ann.hurricane.wind];
        NSString * presure = [NSString stringWithFormat:@"Presure:%@",Ann.hurricane.presure];
        NSString * stormType = [NSString stringWithFormat:@"StormType:%@",Ann.hurricane.stormType];
        NSString * category = [NSString stringWithFormat:@"Category:%@",Ann.hurricane.category];
        NSString * name = [NSString stringWithFormat:@"Name:%@",Ann.hurricane.name];
        
        [keyValueArray addObject:date];
        [keyValueArray addObject:time];
        [keyValueArray addObject:wind];
        [keyValueArray addObject:presure];
        [keyValueArray addObject:stormType];
        [keyValueArray addObject:category];
        [keyValueArray addObject:name];
    }
    
    return keyValueArray;
}

3、实现地图视图拖拽时的事件——开始拖动时隐藏 结束时再出来

//当拖拽，放大，缩小，双击手势开始时调用
- (void)mapView:(MKMapView *)mapView regionWillChangeAnimated:(BOOL)animated
{
    //hide the VC if it is shown
    if (_callOutVC.view.alpha == 1.0) {
        _callOutVC.view.alpha =0.0;
    }
    
}

//当拖拽，放大，缩小，双击手势结束时调用
- (void)mapView:(MKMapView *)mapView regionDidChangeAnimated:(BOOL)animated
{
    
    if (!(_annCoor.latitude == 0.0 && _annCoor.longitude == 0.0)) {
        _callOutVC.view.alpha =1.0;
        CGPoint point = [_mapView convertCoordinate:_annCoor toPointToView:_mapView];
        _callOutVC.view.center = point;
    }
}