iOS集成地图（百度地图为例）
2021-04-15 本文已影响0人
啸狼天
1.集成地图环境
先去百度官方下载SDK，然后导入对应的文件到你的项目中，在这里杂乱的不说，提几个地方：mapapi.bundle别忘了导入； 除了导入百度提供的包，还要手动在程序中添加系统库； info.plist文件中几个操作：iOS9后http协议的设置；获取地理位置的设置；display name的设置； 最后一点，去百度申请的key要对应你项目中的buddle id 。xcode7.3中自动提示有时候挺让人无语的，不出来我们的结果，导入头文件的时候他提示的都不对，现在把所以头文件写在下面，根据需要复制粘贴即可。
#import <BaiduMapAPI_Base/BMKBaseComponent.h>//引入base相关所有的头文件
#import <BaiduMapAPI_Map/BMKMapComponent.h>//引入地图功能所有的头文件
#import <BaiduMapAPI_Search/BMKSearchComponent.h>//引入检索功能所有的头文件
#import <BaiduMapAPI_Cloud/BMKCloudSearchComponent.h>//引入云检索功能所有的头文件
#import <BaiduMapAPI_Location/BMKLocationComponent.h>//引入定位功能所有的头文件
#import <BaiduMapAPI_Utils/BMKUtilsComponent.h>//引入计算工具所有的头文件
#import <BaiduMapAPI_Radar/BMKRadarComponent.h>//引入周边雷达功能所有的头文件
#import <BaiduMapAPI_Map/BMKMapView.h>//只引入所需的单个头文件
好了，第一步结束。
2.基本地图的实现
在appdelegate中导入<BaiduMapAPI_Base/BMKMapManager.h>框架，并服从BMKGeneralDelegate代理，在didFinishLaunchingWithOptions方法中实现如下代码
_mapManager = [[BMKMapManager alloc] init];
BOOL ret = [_mapManager start:@"你的key"generalDelegate:self];
if (!ret) {
NSLog(@"manager start failed!");
}
return YES;
在viewcontroller中，遵循BMKMapViewDelegate代理
//遵循代理写在viewwillappear中
- (void)viewWillAppear:(BOOL)animated {
[_mapView viewWillAppear];
_mapView.delegate = self;
_locService.delegate = self;
_geoCodeSearch.delegate = self;
}
- (void)viewWillDisappear:(BOOL)animated {
[_mapView viewWillDisappear];
_mapView.delegate = nil;
_locService.delegate = nil;
_geoCodeSearch.delegate = nil;
}
在viewdidload中，
_mapView = [[BMKMapView alloc] initWithFrame:CGRectMake(0, 100, self.view.frame.size.width, self.view.frame.size.height - 100)];
[self.view addSubview:_mapView];
然后地图出来，到这一步算是刚开始
3.地图的定位
UIButton *positionBtn = [UIButton buttonWithType:UIButtonTypeSystem];
positionBtn.frame = CGRectMake(30, 64, 70, 20);
[positionBtn setTitle:@"定位" forState:UIControlStateNormal];
[positionBtn addTarget:self action:@selector(position:) forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:positionBtn];
遵循BMKLocationServiceDelegate代理，定义BMKLocationService类
在position点击方法中
_locService.delegate = self;
_mapView.zoomLevel = 14.1; //地图等级，数字越大越清晰
_mapView.showsUserLocation = NO;//是否显示定位小蓝点，no不显示，我们下面要自定义的(这里显示前提要遵循代理方法，不可缺少)
_mapView.userTrackingMode = BMKUserTrackingModeNone;
//定位
[_locService startUserLocationService];
定位代理方法-(void)didUpdateBMKUserLocation:(BMKUserLocation *)userLocation，在这个方法中，定位时候能获取到经纬度 userLocation.location.coordinate
然后点击了，发现地图没有动静，这是为啥哩~
哦，原来我们忘记设置了地图的中心点
_mapView.centerCoordinate = userLocation.location.coordinate（如果直接写在代理方法中，需要在代理方法末尾调用[_locService stopUserLocationService] 方法，让定位停止，要不然一直定位，你的地图就一直锁定在一个位置）。
当然了，想要动画的话，我们还是这样设置：
[_mapView setCenterCoordinate:userLocation.location.coordinate animated:YES];
然后定位吧，地图上就显示出一个蓝色小点，然后你高兴了吧，没等你高兴多久，产品跑来给你说，定位的图片我们需要用我们自己设计的图片，傻了吧。接下来就需要用到自定义标注了。
4.标注
讲标注之前，需要弄懂两个类的区别，BMKPointAnnotation和BMKAnnotationView，很多初入地图行的人都弄不清(我自己一开始也是)，前者官方解释的是一个点的标注，后者则是标注视图，好像还是不清楚0.0。。。。按照我的理解就是：前者代表一个点，比如你地图上有很多红色大头针，大头针往那里一插，是不是有个点？这个点，就表示BMKPointAnnotation，具有地理的经纬度特性（其他的一些信息也可以写在这里，如果你的后台将一系列信息包括经纬度信息传给你的话，你就可以重写这个类）。BMKAnnotationView则代表这个红色大头针，什么？红色大头针不好看，我要换成德玛西亚巨剑，好的，直接在这个BMKAnnotationView内部添加image即可，怎么样，弄懂了吗？？ 好，下面来代码，走起~
首先解决第一个问题，系统蓝色定位小圆点太丑，要换我们自己的，OK。
(1) 对BMKPointAnnotation操作，上面定位获取地理位置的代理方法中
_pointAnnotation = [[BMKPointAnnotation alloc] init];
_pointAnnotation.coordinate = userLocation.location.coordinate;
_pointAnnotation.title = @"我在这个地方";
_pointAnnotation.subtitle = @"你在哪呢";
[_mapView addAnnotation:_pointAnnotation];
[_mapView selectAnnotation:_pointAnnotation animated:YES];
[_mapView addAnnotation:_pointAnnotation];，运行的时候他会自动去寻找BMKAnnotationView，这个需要在标注代理方法中写。
(2) 对BMKAnnotationView操作，新建一个类继承于BMKAnnotationView，在.h中声明一个属性
@property (nonatomic, strong) UIImageView *bgImageView;
在.m文件中重写init方法
- (id)initWithAnnotation:(id<BMKAnnotation>)annotation reuseIdentifier:(NSString *)reuseIdentifier{
self = [super initWithAnnotation:annotation reuseIdentifier:reuseIdentifier];
if (self) {
self.backgroundColor = [UIColor colorWithWhite:0 alpha:0];
self.centerOffset = CGPointMake(0, 0);
//定义改标注总的大小
self.frame = CGRectMake(0, 0, 39, 39);
_bgImageView = [[UIImageView alloc] initWithFrame:self.frame];
_bgImageView.image = [UIImage imageNamed:@"iconsend.png"];
[self addSubview:_bgImageView];
}
return self;
}
(3) 生成对应气泡时候触发的方法
- (BMKAnnotationView *)mapView:(BMKMapView *)mapView viewForAnnotation:(id<BMKAnnotation>)annotation {
//if ([annotation isKindOfClass:[BMKPointAnnotation class]]) //判断是哪个BMKPointAnnotation
MyAnnotionView *newAnnotationView = (MyAnnotionView *)[mapView dequeueReusableAnnotationViewWithIdentifier:myLocationViewID];
if (newAnnotationView == nil) {
newAnnotationView = [[MyAnnotionView alloc] initWithAnnotation:annotation reuseIdentifier:myLocationViewID];
}
return newAnnotationView;
}
如下图：
image
自定义的标注完成了，自定义气泡呢？这涉及到一个paopaoView，也就是BMKAnnotationView内部的一个属性，它就是点击触发的气泡视图。
在上面的(2)方法中，添加一段paopaoView代码
- (id)initWithAnnotation:(id<BMKAnnotation>)annotation reuseIdentifier:(NSString *)reuseIdentifier{
self = [super initWithAnnotation:annotation reuseIdentifier:reuseIdentifier];
if (self) {
self.backgroundColor = [UIColor colorWithWhite:0 alpha:0];
self.centerOffset = CGPointMake(0, 0);
self.frame = CGRectMake(0, 0, 39, 39);
_bgImageView = [[UIImageView alloc] initWithFrame:self.frame];
_bgImageView.image = [UIImage imageNamed:@"iconsend.png"];
[self addSubview:_bgImageView];
UIImageView *paoView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 30, 30)];
paoView.image =[UIImage imageNamed:@"iconsend.png"];
self.paopaoView = [[BMKActionPaopaoView alloc] initWithCustomView:paoView];
}
return self;
}
运行，如下
image
还有我们什么时候重写BMKPointAnnotation呢，一般来说他只是传个地理位置信息，当我们在地图上想要显示多个地理位置信息的时候，比如后台返回来一个数组，里面每个元素都是一个字典，每个字典代表一个单位，除了地理位置信息，还有其他信息，比如名字，图片等，对应的是每个地理位置，这时候重写BMKPointAnnotation，并在其中定义一个model属性，用来接收后台返回来的model信息串。然后声明这个pointAnnotation类的对象，并给他赋值后台返回来的model信息串中的位置信息，并将整个model传给他，后面的操作和上面的步骤一样。
具体想怎么做，看你自己~~~
5.POI检索
我们先定义一个输入框，然后根据输入的文字来大概的地址
UITextField *poiTextField = [[UITextField alloc] initWithFrame:CGRectMake(30, 30, 100, 20)];
poiTextField.backgroundColor = [UIColor lightGrayColor];
[poiTextField addTarget:self action:@selector(valueChange:) forControlEvents:UIControlEventEditingChanged];
poiTextField.delegate = self;
[self.view addSubview:poiTextField];
- (void)valueChange:(UITextField *)textField {
NSLog(@"123");
_poiSearch = [[BMKPoiSearch alloc] init];
_poiSearch.delegate = self;
NSLog(@"搜索：%@",textField.text);
//附近云检索
BMKNearbySearchOption *nearBySearchOption = [[BMKNearbySearchOption alloc] init];
nearBySearchOption.pageIndex = 0;
nearBySearchOption.pageCapacity = 10;
nearBySearchOption.keyword = textField.text;
//检索的中心点
nearBySearchOption.location = _locService.userLocation.location.coordinate;
nearBySearchOption.radius = 100;
BOOL flag = [_poiSearch poiSearchNearBy:nearBySearchOption];
if (flag) {
NSLog(@"success");
} else {
NSLog(@"fail");
}
}
在返回的代理方法中，我们打印一下
- (void)onGetPoiResult:(BMKPoiSearch *)searcher result:(BMKPoiResult *)poiResult errorCode:(BMKSearchErrorCode)errorCode {
if (errorCode == BMK_SEARCH_NO_ERROR) {
for (int i = 0; i < poiResult.poiInfoList.count; i++) {
BMKPoiInfo *info = [poiResult.poiInfoList objectAtIndex:i];
NSLog(@"地址：%@", info.name);
}
}
}
效果图如下
image
是不是得到我们要的数据了呢。然后把这些数据显示到tableview上，是不是就像我们常见的搜索框搜索，得到对应的结果了~~~
6.地理反编码
地理反编码的应用一般是移动地图，然后显示附近的地理信息（我们常见的app上这个功能一般是和poi搜索配合使用的）
声明变量，遵循代理
@property (nonatomic, strong) BMKGeoCodeSearch *geoCodeSearch;
移动地图的代理方法
- (void)mapView:(BMKMapView *)mapView regionDidChangeAnimated:(BOOL)animated {
CLLocationCoordinate2D carLocation = [_mapView convertPoint:self.view.center toCoordinateFromView:self.view];
BMKReverseGeoCodeOption *option = [[BMKReverseGeoCodeOption alloc] init];
option.reverseGeoPoint = CLLocationCoordinate2DMake(carLocation.latitude, carLocation.longitude);
NSLog(@"%f - %f", option.reverseGeoPoint.latitude, option.reverseGeoPoint.longitude);
//调用发地址编码方法，让其在代理方法onGetReverseGeoCodeResult中输出
[_geoCodeSearch reverseGeoCode:option];
}
//返回地理反编码
- (void)onGetReverseGeoCodeResult:(BMKGeoCodeSearch *)searcher result:(BMKReverseGeoCodeResult *)result errorCode:(BMKSearchErrorCode)error {
if (result) {
NSLog(@"%@ - %@ - %@ - %@ - %@", result.addressDetail.province, result.addressDetail.city, result.addressDetail.streetName, result.address, result.businessCircle);
} else {
NSLog(@"找不到");
}
}
移动地图，效果如下：
image
当然了，如果你想配合着poi使用，只需要把result.poiList数据源存储到数组中，然后在tableView中显示出来，你会了吗？~~~~
7.路径规划
将目的地和初始地点连接起来，通过百度内部API来告诉我们怎么去（也就是去一个地方查地图一样）
首先导入<BaiduMapAPI_Search/BMKRouteSearch.h>
<BaiduMapAPI_Utils/BMKUtilsComponent.h>这两个头文件，并遵循代理BMKRouteSearchDelegate。
在.m文件最上面，我们还要声明一个PointAnnotation类，代码如下
@interface RouteAnnotation : BMKPointAnnotation
{
int _type; //0:起点 1：终点 2：公交 3：地铁 4：驾乘 5：途经点
int _degree;
}
@property (nonatomic) int type;
@property (nonatomic) int degree;
@end
@implementation RouteAnnotation
@synthesize type = _type;
@synthesize degree = _degree;
@end
同时，我们定义一个属性
@property (nonatomic, strong) BMKRouteSearch *routeSearch;
在button点击方法里实现下面的代码
- (void)PlanBtn:(UIButton *)btn {
_routeSearch = [[BMKRouteSearch alloc] init];
_routeSearch.delegate = self;
//发起检索
BMKPlanNode *start = [[BMKPlanNode alloc] init];
start.name = @"国贸";
BMKPlanNode *end = [[BMKPlanNode alloc] init];
end.name = @"国家体育总局";
BMKTransitRoutePlanOption *transiRouteS = [[BMKTransitRoutePlanOption alloc] init];
transiRouteS.city = @"北京市";
transiRouteS.from = start;
transiRouteS.to = end;
BOOL flag = [_routeSearch transitSearch:transiRouteS];
if (flag) {
NSLog(@"transtion检索发送成功");
} else {
NSLog(@"fail");
}
}
在上面的代码中，我们用的是BMKTransitRoutePlanOption，也就是公交(地铁)方式，如果你想用别的（比如步行，或者骑乘，驾车等），可在这替换方法
由于上面我们用的是公交，所以下面我们要实现公交的代理方法（每种方式有每种方式的代理方法）
- (void)onGetTransitRouteResult:(BMKRouteSearch *)searcher result:(BMKTransitRouteResult *)result errorCode:(BMKSearchErrorCode)error {
if (error == BMK_SEARCH_NO_ERROR) {
//在此处理正常结果
BMKTransitRouteLine* plan = (BMKTransitRouteLine*)[result.routes objectAtIndex:0];
NSInteger size = [plan.steps count];
NSLog(@"size == %ld", (long)size);
int planPointCounts = 0;
for (int i = 0; i < size; i++) {
BMKTransitStep *tansitStep = [plan.steps objectAtIndex:i];
if (i == 0 ) {
RouteAnnotation *item = [[RouteAnnotation alloc] init];
item.coordinate = plan.starting.location;
item.title = @"起点";
item.type = 0;
[_mapView addAnnotation:item]; //添加起点标注
} else if (i == size - 1) {
RouteAnnotation *item = [[RouteAnnotation alloc] init];
item.coordinate = plan.terminal.location;
item.title = @"终点";
item.type = 1;
[_mapView addAnnotation:item];
}
RouteAnnotation *item = [[RouteAnnotation alloc] init];
item.coordinate = tansitStep.entrace.location; //路段入口信息
item.title = tansitStep.instruction; //路程换成说明
item.type = 3;
[_mapView addAnnotation:item];
//轨迹点总数累计
planPointCounts += tansitStep.pointsCount;
}
//轨迹点
BMKMapPoint * temppoints = new BMKMapPoint[planPointCounts]; //文件后缀名改为mm
int i = 0;
for (int j = 0; j < size; j++) {
BMKTransitStep *transitStep = [plan.steps objectAtIndex:j];
int k = 0;
for (k = 0; k < transitStep.pointsCount; k++) {
temppoints[i].x = transitStep.points[k].x;
temppoints[i].y = transitStep.points[k].y;
I++;
}
}
//通过points构建BMKPolyline
BMKPolyline *polyLine = [BMKPolyline polylineWithPoints:temppoints count:planPointCounts];
[_mapView addOverlay:polyLine]; //添加路线overlay
delete []temppoints;
[self mapViewFitPolyLine:polyLine];
}
else if (error == BMK_SEARCH_AMBIGUOUS_ROURE_ADDR){
//当路线起终点有歧义时通，获取建议检索起终点
//result.routeAddrResult
}
else {
NSLog(@"抱歉，未找到结果");
}
}
在上面结尾那里我们添加了路线overlay，所以我们要实现overlay的代理方法
- (BMKOverlayView*)mapView:(BMKMapView *)map viewForOverlay:(id<BMKOverlay>)overlay
{
if ([overlay isKindOfClass:[BMKPolyline class]]) {
BMKPolylineView* polylineView = [[BMKPolylineView alloc] initWithOverlay:overlay];
polylineView.fillColor = [[UIColor alloc] initWithRed:0 green:1 blue:1 alpha:1];
polylineView.strokeColor = [[UIColor alloc] initWithRed:0 green:0 blue:1 alpha:0.7];
polylineView.lineWidth = 3.0;
return polylineView;
}
return nil;
}
在这里，你可以根据自己的需要改变线条的一些属性，不多说。
把下面这段代码复制到工程里，这是百度给我们写好的根据路径计算地图范围的，挺棒的，直接用他们的。
/根据polyline设置地图范围
- (void)mapViewFitPolyLine:(BMKPolyline *) polyLine {
CGFloat ltX, ltY, rbX, rbY;
if (polyLine.pointCount < 1) {
return;
}
BMKMapPoint pt = polyLine.points[0];
ltX = pt.x, ltY = pt.y;
rbX = pt.x, rbY = pt.y;
for (int i = 1; i < polyLine.pointCount; i++) {
BMKMapPoint pt = polyLine.points[I];
if (pt.x < ltX) {
ltX = pt.x;
}
if (pt.x > rbX) {
rbX = pt.x;
}
if (pt.y > ltY) {
ltY = pt.y;
}
if (pt.y < rbY) {
rbY = pt.y;
}
}
BMKMapRect rect;
rect.origin = BMKMapPointMake(ltX , ltY);
rect.size = BMKMapSizeMake(rbX - ltX, rbY - ltY);
[_mapView setVisibleMapRect:rect];
_mapView.zoomLevel = _mapView.zoomLevel - 0.3;
}
由于我们在公交的代理方法中添加了标注，所以我们要在标注的代理方法中实现我们自定义的标注
if ([annotation isKindOfClass:[RouteAnnotation class]]) {
return [self getRouteAnnotationView:mapView viewForAnnotation:annotation];
}
这里面调用了一个方法，我们用百度SDK中给我们写好的，由于他们写的较多，还涉及到其他文件，在这里我们就举个例子，所以有的我给注掉了，咱们就看个显示效果，好看点的效果到时候咱们再去百度SDK中把它的拿来。
- (BMKAnnotationView*)getRouteAnnotationView:(BMKMapView *)mapview viewForAnnotation:(RouteAnnotation*)routeAnnotation
{
BMKAnnotationView* view = nil;
switch (routeAnnotation.type) {
case 0:
{
view = [mapview dequeueReusableAnnotationViewWithIdentifier:@"start_node"];
if (view == nil) {
view = [[BMKAnnotationView alloc]initWithAnnotation:routeAnnotation reuseIdentifier:@"start_node"];
view.image = [UIImage imageNamed:@"icon_nav_start.png"];
view.centerOffset = CGPointMake(0, -(view.frame.size.height * 0.5));
view.canShowCallout = TRUE;
}
view.annotation = routeAnnotation;
}
break;
case 1:
{
view = [mapview dequeueReusableAnnotationViewWithIdentifier:@"end_node"];
if (view == nil) {
view = [[BMKAnnotationView alloc]initWithAnnotation:routeAnnotation reuseIdentifier:@"end_node"];
view.image = [UIImage imageNamed:@"icon_nav_end.png"];
view.centerOffset = CGPointMake(0, -(view.frame.size.height * 0.5));
view.canShowCallout = TRUE;
}
view.annotation = routeAnnotation;
}
break;
case 2:
{
view = [mapview dequeueReusableAnnotationViewWithIdentifier:@"bus_node"];
if (view == nil) {
view = [[BMKAnnotationView alloc]initWithAnnotation:routeAnnotation reuseIdentifier:@"bus_node"];
view.image = [UIImage imageNamed:@"icon_nav_bus.png"];
view.canShowCallout = TRUE;
}
view.annotation = routeAnnotation;
}
break;
case 3:
{
view = [mapview dequeueReusableAnnotationViewWithIdentifier:@"rail_node"];
if (view == nil) {
view = [[BMKAnnotationView alloc]initWithAnnotation:routeAnnotation reuseIdentifier:@"rail_node"];
view.image = [UIImage imageNamed:@"icon_nav_rail.png"];
view.canShowCallout = TRUE;
}
view.annotation = routeAnnotation;
}
break;
case 4:
{
view = [mapview dequeueReusableAnnotationViewWithIdentifier:@"route_node"];
if (view == nil) {
view = [[BMKAnnotationView alloc]initWithAnnotation:routeAnnotation reuseIdentifier:@"route_node"];
view.canShowCallout = TRUE;
} else {
[view setNeedsDisplay];
}
// UIImage* image = [UIImage imageNamed:@"icon_direction.png"];
// view.image = [image imageRotatedByDegrees:routeAnnotation.degree];
view.annotation = routeAnnotation;
}
break;
case 5:
{
view = [mapview dequeueReusableAnnotationViewWithIdentifier:@"waypoint_node"];
if (view == nil) {
view = [[BMKAnnotationView alloc]initWithAnnotation:routeAnnotation reuseIdentifier:@"waypoint_node"];
view.canShowCallout = TRUE;
} else {
[view setNeedsDisplay];
}
// UIImage* image = [UIImage imageWithContentsOfFile:[self getMyBundlePath1:@"images/icon_nav_waypoint.png"]];
// view.image = [image imageRotatedByDegrees:routeAnnotation.degree];
view.annotation = routeAnnotation;
}
break;
default:
break;
}
return view;
}
好了，到这里就算结束了，根据公交进行路径规划，实现效果如下：
image
对了，如果你想算出开始到结束的距离(非直线距离，一般我们都算走过的里程),可以直接在公交的代理方法中，用BMKTransitRouteLine的distance属性，再除以1000，就可以算出公里数了，很简单吧？？~~~
BMKTransitRouteLine* plan = (BMKTransitRouteLine*)[result.routes objectAtIndex:0];
NSLog(@"juli is == %d公里", plan.distance / 1000);
打印结果如下图：
image
