当前位置: 开发笔记 > 编程语言 > 正文

ObjectiveCMapKit的使用LBS简单的租车主界面demo

作者：2013丶峰峰最逆天_192 | 来源：互联网 | 2023-06-12 21:06

写在前面弄了下个人站…防止内容再次被锁定…所有东西都在这里面welcome~个人博客效果效果.gif分析三个view：地图view、车辆信息view、车辆类型选择view地图vie

写在前面
弄了下个人站&＃8230;防止内容再次被锁定&＃8230;所有东西都在这里面
welcome~
个人博客

效果

《Objective-C MapKit的使用-LBS简单的租车主界面demo》效果.gif

分析

三个view：地图view、车辆信息view、车辆类型选择view

地图view：大头针的摆放，根据不同的种类显示大头针
车辆信息view：根据当前点击的大头针显示对应的车辆信息
车辆类型选择view：选择车辆类型

交互分析

选择车辆类型，地图上出现不同的大头针
车辆信息view可滑动，滑动完成后地图定位到当前车辆的大头针上

view的搭建

车辆选择view：自定义slider 分段滑竿（上一篇文章提到过）
车辆信息View：使用uicollectionView的流水布局，做出分页效果
mapView:自定义大头针，根据类型选择不同的大头针图片

参数的传递

模拟数据通过编写1.plist完成
读取plist数据,通过选择车辆类型,将筛选出来的数据使用模型数组存放,通过set方法传递给mapView和车辆信息view，并刷新界面
选择车辆信息view 通过代理将当前显示的车辆信息页传递给mapview并定位
mapview有两个委托方法,点击空白处和点击大头针两个方法,用来设置车辆选择view和车辆信息view的显隐

代码

数据模型

数据模型及KVC使用

#import //车类型 typedef NS_ENUM(NSInteger, CarType) { CarTypeNOne= -1, //默认大头针 CarTypeDaily, //日租 CarTypeHourly, //时租 CarTypeLong, //长租 CarTypeTestDrive, //试驾 }; @interface CarModel : NSObject @property(nonatomic,strong)NSDictionary *location; //经纬度 @property(nonatomic,assign)NSString *carType; //车类型 @property(nonatomic,copy)NSString *carName; //车名称 @property(nonatomic,copy)NSString *price; //价格 @property(nonatomic,copy)NSString *distance; //与用户的距离 @property(nonatomic,copy)NSString *locationName; //当前位置名 @property(nonatomic,copy)NSString *imageName; //车图片 @property(nonatomic,copy)NSString *order; //订单 @property(nonatomic,copy)NSString *banDay; //限行 - (instancetype)initWithCarModelDict:(NSDictionary*)dict; + (instancetype)carModelWithDict:(NSDictionary*)ditc; @end

自定义collectionview

使用xib的约束直接布局cell，cell外部公开carModel,用于赋值

《Objective-C MapKit的使用-LBS简单的租车主界面demo》 item布局

给自定义的collectionview写一个委托，用来告诉controller当前选择cellitem

#import #import "CarModel.h" @protocol CarInfoCollectionViewDelegate - (void)selectItemArray:(NSArray*)array WithIndex:(NSInteger)index; @end @interface CarInfoCollectionView : UICollectionView @property (nonatomic,strong)NSMutableArray *carModelArray; @property (nonatomic,strong)id delegate2; @end

界面呈现翻页效果左右两边留上一页和下一页的边缘，需要计算停下的位置，使用UICollectionViewDelegate代理方法

//停下的位置 - (void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint *)targetContentOffset { UICollectionViewFlowLayout *layout = (UICollectionViewFlowLayout*)self.collectionViewLayout; //实际滑动的距离 float pageWidth = layout.itemSize.width + layout.minimumLineSpacing; //当前位置 float currentOffset = scrollView.contentOffset.x; //目标位置 float targetOffset = targetContentOffset->x; float newTargetOffset = 0; int count = 0; if (targetOffset > currentOffset) { //向上取整 count = ceilf(currentOffset / pageWidth); newTargetOffset = ceilf(currentOffset / pageWidth) * pageWidth; }else { //向下取整 count = floorf(currentOffset / pageWidth); newTargetOffset = floorf(currentOffset / pageWidth) * pageWidth; } //处理边界 if (newTargetOffset <0) newTargetOffset = 0; else if (newTargetOffset > scrollView.contentSize.width) newTargetOffset = scrollView.contentSize.width; //设置目标位置指针 targetContentOffset->x = currentOffset; //跳转新位置 [scrollView setContentOffset:CGPointMake(newTargetOffset, 0) animated:YES]; }

当界面滚动完成时，通过代理通知controller当前的cellitem

- (void)scrollViewDidEndScrollingAnimation:(UIScrollView *)scrollView { UICollectionViewFlowLayout *layout = (UICollectionViewFlowLayout*)self.collectionViewLayout; //实际滑动的距离 int pageWidth = layout.itemSize.width + layout.minimumLineSpacing; //当前位置 int currentOffset = scrollView.contentOffset.x; int count = currentOffset / pageWidth; NSLog(@"滚完了 %d",count ); if ([self.delegate2 respondsToSelector:@selector(selectItemArray:WithIndex:)]) { [self.delegate2 selectItemArray:self.carModelArray WithIndex:count]; } }

mapView

代理

#import #import #import "CarModel.h" @protocol MapViewDelegate //点击地图没有点到大头针 - (void)didSelectMapWithoutAnnotation; //点到大头针 - (void)didSelectMapAnnotationViewWithCarArray:(NSMutableArray*)carArray WithIndex:(NSInteger)index; @end @interface MapView : UIView @property(nonatomic,strong)id delegate; @property (nonatomic,strong)MKMapView *map; //大头针数组 @property (nonatomic,strong)NSMutableArray *annotationArray; //car数据模型数组 @property (nonatomic,strong)NSMutableArray *carModelArray; @end

使用到的全局变量

@interface MapView() @property (nonatomic,strong)CLLocationManager *locationManager; @property (nonatomic,strong)UIButton *currentLocationBtn; @property (nonatomic,strong)UIButton *zoomInBtn; //放大 @property (nonatomic,strong)UIButton *zoomOutBtn;//缩小 @property (nonatomic,strong)MyAnnotation *userLocationAnnotation; @property (nonatomic,assign)int scale; @end

初始化

//初始化 - (instancetype)initWithFrame:(CGRect)frame { self = [super initWithFrame:frame]; if (self) { self.carModelArray = [NSMutableArray array]; [self loadingMapInfo]; [self addSubview:self.map]; [self addSubview:self.currentLocationBtn]; [self addSubview:self.zoomInBtn]; [self addSubview:self.zoomOutBtn]; } return self; }

全局变量使用懒加载
需要提到的是当前位置的大头针的位置需要进行火星转码

//当前位置大头针 - (MyAnnotation *)userLocationAnnotation { if (!_userLocationAnnotation) { _userLocatiOnAnnotation= [[MyAnnotation alloc] init]; _userLocationAnnotation.type = CarTypeNone; //转火星坐标 CLLocationCoordinate2D currentLocation = [WGS84TOGCJ02 transformFromWGSToGCJ:self.locationManager.location.coordinate]; _userLocationAnnotation.coordinate = currentLocation; _userLocationAnnotation.title = @"我的位置"; } return _userLocationAnnotation; }

定位当前位置和放大缩小按钮的实现

//定位 - (UIButton *)currentLocationBtn { if (!_currentLocationBtn) { _currentLocatiOnBtn= [[UIButton alloc] initWithFrame:CGRectMake(0, CGRectGetHeight(self.frame)*0.6, 50, 50)]; [_currentLocationBtn setImage:[UIImage imageNamed:@"location_my.png"] forState:UIControlStateNormal]; [_currentLocationBtn addTarget:self action:@selector(clickCurrentBtn) forControlEvents:UIControlEventTouchUpInside]; } return _currentLocationBtn; } //点击定位 - (void)clickCurrentBtn { [self.map deselectAnnotation:self.userLocationAnnotation animated:NO]; [self.map selectAnnotation:self.userLocationAnnotation animated:YES]; } //放大 - (UIButton *)zoomInBtn { if (!_zoomInBtn) { _zoomInBtn = [[UIButton alloc] initWithFrame:CGRectMake(CGRectGetWidth(self.frame)-60, CGRectGetHeight(self.frame)*0.55, 50, 50)]; [_zoomInBtn setImage:[UIImage imageNamed:@"zoomin.png"] forState:UIControlStateNormal]; [_zoomInBtn addTarget:self action:@selector(mapZoomIn) forControlEvents:UIControlEventTouchUpInside]; } return _zoomInBtn; } //放大方法 - (void)mapZoomIn { MKCoordinateRegion region = self.map.region; region.span.latitudeDelta = region.span.latitudeDelta * 0.5; region.span.lOngitudeDelta= region.span.longitudeDelta * 0.5; [self.map setRegion:region animated:YES]; } //缩小 - (UIButton *)zoomOutBtn { if (!_zoomOutBtn) { _zoomOutBtn = [[UIButton alloc] initWithFrame:CGRectMake(CGRectGetWidth(self.frame)-60, CGRectGetMaxY(self.zoomInBtn.frame), 50, 50)]; [_zoomOutBtn setImage:[UIImage imageNamed:@"zoomout.png"] forState:UIControlStateNormal]; [_zoomOutBtn addTarget:self action:@selector(mapZoomOut) forControlEvents:UIControlEventTouchUpInside]; } return _zoomOutBtn; } //缩小方法 - (void)mapZoomOut { MKCoordinateRegion region = self.map.region; region.span.latitudeDelta = region.span.latitudeDelta * 2; region.span.lOngitudeDelta= region.span.longitudeDelta * 2; [self.map setRegion:region animated:YES]; }

授权使用定位功能 info.plist上添加Privacy - Location Always Usage Description 值随便填

//获取授权 - (void)getAuthorization { //获取授权状态 CLAuthorizationStatus status = [CLLocationManager authorizationStatus]; if (status == kCLAuthorizationStatusNotDetermined) { [self.locationManager requestAlwaysAuthorization]; } else if (status == kCLAuthorizationStatusAuthorizedAlways) { //不跟随用户 self.map.userTrackingMode = MKUserTrackingModeNone; } } //授权后进入 - (void)locationManager:(CLLocationManager *)manager didChangeAuthorizationStatus:(CLAuthorizationStatus)status{ //授权后开始定位 [self.locationManager startUpdatingLocation]; //加载地图信息 [self loadData]; [self loadingMapInfo]; }

公开变量设置set方法用于刷新地图大头针信息

//set方法 - (void)setCarModelArray:(NSMutableArray *)carModelArray { for (MyAnnotation *an in self.map.annotations) { if (an.type != CarTypeNone) { [self.map removeAnnotation:an]; } } [_carModelArray removeAllObjects]; _carModelArray = carModelArray; //重新加载数据 [self loadData]; } //加载模拟数据 - (void)loadData { [self.annotationArray removeAllObjects]; //完善model数据 for (CarModel *model in self.carModelArray) { CLGeocoder *coder = [[CLGeocoder alloc] init]; //model中的位置 CLLocation *location = [[CLLocation alloc] initWithLatitude:[model.location[@"lat"] doubleValue] longitude:[model.location[@"long"] doubleValue]]; //反地理编码获得经纬度对应的地名并计算与当前位置的距离 [coder reverseGeocodeLocation:location completionHandler:^(NSArray * _Nullable placemarks, NSError * _Nullable error) { CLPlacemark *mark = [placemarks firstObject]; CLLocationCoordinate2D locatio = [WGS84TOGCJ02 transformFromWGSToGCJ:self.locationManager.location.coordinate]; CLLocation *currentLocation = [[CLLocation alloc] initWithLatitude:locatio.latitude longitude:locatio.longitude]; CLLocationDistance dis = [location distanceFromLocation:currentLocation]; model.locatiOnName= mark.name; model.distance = [NSString stringWithFormat:@"%.2fkm",dis/1000]; }]; } int count = 0; //加载大头针 for (CarModel *model in self.carModelArray) { MyAnnotation *annotation = [[MyAnnotation alloc] init]; CLLocationCoordinate2D location = CLLocationCoordinate2DMake([model.location[@"lat"] doubleValue], [model.location[@"long"] doubleValue]); annotation.coordinate = location; annotation.index = count; annotation.type = [model.carType intValue]; [self.map addAnnotation:annotation]; [self.annotationArray addObject:annotation]; count++; } }

mapview自身的代理方法，点击和取消大头针，实现回调跳转车辆信息view

#pragma mark - MKMapViewDelegate //点击大头针 - (void)mapView:(MKMapView *)mapView didSelectAnnotationView:(MKAnnotationView *)view { //重置汽车原来的颜色 NSArray *array = [mapView annotations]; for (MyAnnotation *an in array) { MKAnnotationView *v = [mapView viewForAnnotation:an]; if ([v.reuseIdentifier isEqualToString:@"carViewID"]) { v.image = [self getCarImageWithTypeInAnnotation:an]; } } //点击小车换颜色 if ([view.reuseIdentifier isEqualToString:@"carViewID"]) { view.image = [UIImage imageNamed:@"pickcar.png"]; //代理回调通知界面将 carInfoView 出现 carPickView消失 if ([self.delegate respondsToSelector:@selector(didSelectMapAnnotationViewWithCarArray:WithIndex:)]) { [self.delegate didSelectMapAnnotationViewWithCarArray:self.carModelArray WithIndex:((MyAnnotation*)view.annotation).index]; } //设置中心点和范围 [self.map setRegion:MKCoordinateRegionMakeWithDistance(((MyAnnotation*)view.annotation).coordinate, 2000, 2000) animated:NO]; } else { [self.map setRegion:MKCoordinateRegionMakeWithDistance(self.userLocationAnnotation.coordinate, 2000, 2000) animated:YES]; } } //没有选中大头针 - (void)mapView:(MKMapView *)mapView didDeselectAnnotationView:(MKAnnotationView *)view { //重置汽车原来的颜色 NSArray *array = [mapView annotations]; for (MyAnnotation *an in array) { MKAnnotationView *v = [mapView viewForAnnotation:an]; if ([v.reuseIdentifier isEqualToString:@"carViewID"]) { v.image = [self getCarImageWithTypeInAnnotation:an]; } } if ([view.reuseIdentifier isEqualToString:@"carViewID"]) { //代理回调通知界面将 carInfoView 消失 carPickView出现小车变为未选中 if ([self.delegate respondsToSelector:@selector(didSelectMapWithoutAnnotation)]) { [self.delegate didSelectMapWithoutAnnotation]; } } }

自定义大头针当前位置使用标注其他位置使用自定义的大头针视图

//当前位置大头针 - (MKPinAnnotationView*)customLocalAnnotationView:(id)annotation { static NSString *locatiOnID= @"locationViewID"; //从缓存池中获取大头针 MKPinAnnotationView *pinView = ( MKPinAnnotationView *)[self.map dequeueReusableAnnotationViewWithIdentifier:locationID]; if (pinView == nil) { pinView = [[MKPinAnnotationView alloc] initWithAnnotation:annotation reuseIdentifier:locationID]; } pinView.annotation = annotation; // 取消气泡显示 pinView.canShowCallout = YES; // 设置大头针是否有下落动画 pinView.animatesDrop = YES; return pinView;} //自定义大头针 - (MKAnnotationView*)customMKAnnotationView:(id)annotation { //自定义大头针 static NSString *carViewID = @"carViewID"; //从缓存池中获取自定义大头针 MKAnnotationView *annoView = [self.map dequeueReusableAnnotationViewWithIdentifier:carViewID]; if (annoView == nil) { //缓存池中没有则创建 annoView = [[MKAnnotationView alloc] initWithAnnotation:annotation reuseIdentifier:carViewID]; } annoView.annotation = annotation; annoView.canShowCallout = NO; annoView.draggable = YES; annoView.image = [self getCarImageWithTypeInAnnotation:annotation]; return annoView; } //根据大头针的类型返回图片 - (UIImage *)getCarImageWithTypeInAnnotation:(MyAnnotation*)annotation { switch (annotation.type) { case CarTypeDaily: return [UIImage imageNamed:@"dailycar.png"]; break; case CarTypeHourly: return [UIImage imageNamed:@"hourlycar.png"]; break; case CarTypeLong: return [UIImage imageNamed:@"longcar.png"]; break; case CarTypeTestDrive: return [UIImage imageNamed:@"testcar.png"]; break; default: break; } return nil; }

viewController主界面

将三个视图定义为全局并使用懒加载
collectionView使用流水布局，为显示翻页效果需要配合增加头尾空白

- (CarInfoCollectionView *)collectionView { if (!_collectionView) { UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init]; layout.itemSize = CGSizeMake(kScreenWidth * 0.85, kScreenHeight*0.2); layout.minimumLineSpacing = kScreenWidth * 0.05; CGFloat referenceWidth = (kScreenWidth - layout.itemSize.width - 2*layout.minimumLineSpacing)/2 + layout.minimumLineSpacing; layout.headerReferenceSize = CGSizeMake(referenceWidth, 0); layout.footerReferenceSize = CGSizeMake(referenceWidth, 0); layout.scrollDirection = UICollectionViewScrollDirectionHorizontal; _collectiOnView= [[CarInfoCollectionView alloc] initWithFrame:CGRectMake(0, kScreenHeight*0.8, self.view.frame.size.width, kScreenHeight*0.2) collectionViewLayout:layout]; _collectionView.hidden = YES; _collectionView.delegate2 = self; } return _collectionView; }

- (MapView *)mapView { if (!_mapView) { _mapView = [[MapView alloc] initWithFrame:self.view.bounds]; _mapView.delegate = self; } return _mapView; } - (CustomSlider *)carPickView { if (!_carPickView) { _carPickView = [[CustomSlider alloc] initWithFrame:CGRectMake(0, kScreenHeight*0.8, kScreenWidth, kScreenHeight*0.2)]; _carPickView.backgroundColor = [UIColor whiteColor]; _carPickView.sliderBarHeight = 10; _carPickView.numberOfPart = 4; _carPickView.partColor = [UIColor grayColor]; _carPickView.sliderColor = [UIColor grayColor]; _carPickView.thumbImage = [UIImage imageNamed:@"yuanxing.png"]; _carPickView.partNameOffset = CGPointMake(0, -30); _carPickView.thumbSize = CGSizeMake(50, 50); _carPickView.partSize = CGSizeMake(20, 20); _carPickView.partNameArray = @[@"日租",@"时租",@"长租",@"试驾"]; [_carPickView addTarget:self action:@selector(valuechange:) forControlEvents:UIControlEventValueChanged]; } return _carPickView; } - (void)viewDidLoad { [super viewDidLoad]; [self.view addSubview:self.mapView]; [self.view addSubview:self.collectionView]; [self.view addSubview:self.carPickView]; [self valuechange:self.carPickView]; }

从plist中加载数据

- (NSMutableArray *) selectCarWithType:(CarType)type { NSMutableArray *resultArray = [NSMutableArray array]; //读取数据 NSString *path = [[NSBundle mainBundle] pathForResource:@"1" ofType:@"plist"]; NSArray *array = [NSArray arrayWithContentsOfFile:path]; //存数据 for (NSDictionary *dict in array) { CarModel *model = [CarModel carModelWithDict:dict]; if ([model.carType intValue] == type) { [resultArray addObject:model]; } } return resultArray; }

实现各种委托方法

- (void)valuechange:(CustomSlider*)sender { NSLog(@"%ld",(long)sender.value); self.mapView.carModelArray = [self selectCarWithType:sender.value]; NSLog(@"%@",self.mapView.carModelArray); } - (void)didReceiveMemoryWarning { [super didReceiveMemoryWarning]; // Dispose of any resources that can be recreated. } //collectionview 滚动结束后调用 - (void)selectItemArray:(NSArray *)array WithIndex:(NSInteger)index { MyAnnotation *an = self.mapView.annotationArray[index]; [self.mapView.map selectAnnotation:an animated:YES];} #pragma mark - mapViewDelegate //点击地图没有点到大头针 - (void)didSelectMapWithoutAnnotation { self.carPickView.hidden = NO; self.collectionView.hidden = YES; } //点到大头针 - (void)didSelectMapAnnotationViewWithCarArray:(NSMutableArray *)carArray WithIndex:(NSInteger)index { self.collectionView.carModelArray = carArray; NSLog(@"cararraycoutn = %lu",(unsigned long)carArray.count); //跳转到选择的车辆信息 [self.collectionView selectItemAtIndexPath:[NSIndexPath indexPathForItem:index inSection:0] animated:YES scrollPosition:UICollectionViewScrollPositionCenteredHorizontally]; //出现车辆信息动画 self.carPickView.hidden = YES; self.collectionView.hidden = NO; }demo地址