上一篇描述了如何自定義標(biāo)記并使用代箭，以及解析csv文件讀取坐標(biāo)和屬性，本篇將自定義氣泡（簡(jiǎn)單的tableview）進(jìn)行屬性的顯示春塌。MapKit自帶的有大頭針Annotation以及基礎(chǔ)的氣泡樣式晓避，但是涉及到具體的案例中不如自己寫樣式來(lái)的方便簇捍。
本篇內(nèi)容：利用Xib自定義Annotation彈出氣泡
具體效果：
點(diǎn)擊Ann彈出氣泡顯示該點(diǎn)屬性
一、創(chuàng)建Xib
創(chuàng)建一個(gè)新的ViewController并記得勾選create Xib按鈕俏拱。完成后將在文件目錄下發(fā)現(xiàn).h .m .xib的文件組暑塑。利用該xib進(jìn)行氣泡的構(gòu)建。
新建Xib組合
二锅必、定義Xib樣式
1事格、StoryBoard 使用
利用Xib開發(fā)的好處在于頁(yè)面布局輕快簡(jiǎn)潔，熟悉StoryBorad使用后可以很輕快進(jìn)行Xib開發(fā)（注意將Xib的size屬性設(shè)置為Freedom搞隐，方便修改Xib的大芯杂蕖），如下圖：
Xib頁(yè)面布局劣纲，一個(gè)簡(jiǎn)單的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
實(shí)現(xiàn)文件：
//
// 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:@"屬性：無(wú)"];
}
cell.backgroundColor = UIColor.greenColor;
return cell;
}
@end
三、外部調(diào)用
1味廊、創(chuàng)建實(shí)例并設(shè)置好大小蒸甜、位置、透明度
@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余佛、實(shí)現(xiàn)Annotation的點(diǎn)擊事件委托(點(diǎn)擊即顯示屬性)
-(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的屏幕坐標(biāo) 把自定義氣泡放過(guò)來(lái)
_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柠新、實(shí)現(xiàn)地圖視圖拖拽時(shí)的事件——開始拖動(dòng)時(shí)隱藏 結(jié)束時(shí)再出來(lái)
//當(dāng)拖拽，放大辉巡，縮小恨憎，雙擊手勢(shì)開始時(shí)調(diào)用
- (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;
}
}
//當(dāng)拖拽，放大郊楣，縮小憔恳，雙擊手勢(shì)結(jié)束時(shí)調(diào)用
- (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;
}
}
