IOS - 百度地图自定义标注的气泡

最近做的项目涉及到百度地图,并且需要在百度地图上添加一些标注等。下载了百度地图的API之后,尝试着实现了在百度地图上显示大头针,自定义大头针和气泡,基本都是用SDK提供的方法。现在提供一下思路。

百度地图中添加标注

  • 百度地图中给出的添加标注的方法
/**
 *向地图窗口添加标注,需要实现BMKMapViewDelegate的-mapView:viewForAnnotation:函数来生成标注对应的View
 *@param annotation 要添加的标注
 */
- (void)addAnnotation:(id )annotation;
  • 添加实现代理
  • 重写代理方法

//- 自定义大头针的图片

  • (BMKAnnotationView *)mapView:(BMKMapView *)mapView viewForAnnotation:(id)annotation{
BMKPinAnnotationView * newAnnotationView = [[BMKPinAnnotationView alloc]initWithAnnotation:annotation reuseIdentifier:@"myAnnotation"];

//设置标注的颜色
newAnnotationView.pinColor = BMKPinAnnotationColorPurple;

//设置标注的动画效果
newAnnotationView.animatesDrop = YES;

//自定义标注的图像
//newAnnotationView.image = [UIImage imageNamed:@"ic_account_box"];

newAnnotationView.annotation = annotation;


// 设定popView的高度
double popViewH = 190;

UIView * popView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, 100, popViewH)];
popView.backgroundColor = [UIColor redColor];
[popView.layer setMasksToBounds:YES];
[popView.layer setCornerRadius:3.0];
popView.alpha = 0.9;

//自定义气泡中的button

//  详情
UIButton * xianQingBtn = [[UIButton alloc]initWithFrame:CGRectMake(8, 10, 80, 50)];
[xianQingBtn setTitle:@"详情" forState:UIControlStateNormal];
xianQingBtn.backgroundColor = [UIColor purpleColor];

[xianQingBtn addTarget:self action:@selector(clickXiangQingBtn) forControlEvents:UIControlEventTouchUpInside];

[popView addSubview:xianQingBtn];


//  添加
UIButton * tianJiaBtn = [[UIButton alloc]initWithFrame:CGRectMake(8, 70, 80, 50)];
[tianJiaBtn setTitle:@"添加" forState:UIControlStateNormal];
tianJiaBtn.backgroundColor = [UIColor purpleColor];

[tianJiaBtn addTarget:self action:@selector(clickTianjiaBtn) forControlEvents:UIControlEventTouchUpInside];

[popView addSubview:tianJiaBtn];


//  删除
UIButton * shanChuBtn = [[UIButton alloc]initWithFrame:CGRectMake(8, 130, 80, 50)];
[shanChuBtn setTitle:@"删除" forState:UIControlStateNormal];
shanChuBtn.backgroundColor = [UIColor purpleColor];

[shanChuBtn addTarget:self action:@selector(clickShanChuBtn) forControlEvents:UIControlEventTouchUpInside];

[popView addSubview:shanChuBtn];




BMKActionPaopaoView * pView = [[BMKActionPaopaoView alloc]initWithCustomView:popView];
pView.frame = CGRectMake(0, 0, 100, popViewH);

((BMKPinAnnotationView *)newAnnotationView).paopaoView = pView;

self.popView = ((BMKPinAnnotationView *)newAnnotationView).paopaoView ;

return newAnnotationView;

}

  • 实现点击标注之后弹出气泡上面button的方法(这里就不设置具体的方法,直接打印)
#pragma mark 地图标注的点击事件

//详情按钮的点击事件
- (void)clickXiangQingBtn{
    NSLog(@"点击了详情按钮");
    
    // 移除泡泡
    [self.popView removeFromSuperview];
}

//添加按钮的点击事件
- (void)clickTianjiaBtn{
    NSLog(@"点击了添加按钮");
    
    // 移除泡泡
    [self.popView removeFromSuperview];
}

//删除按钮的点击事件
- (void)clickShanChuBtn{
    NSLog(@"点击了删除按钮");
    
    // 移除泡泡
    [self.popView removeFromSuperview];
}
  • 在你需要执行的方法中添加标注,这里我是在定位之后,自己的坐标上面显示的标注
/**
 * 用户方向更新后,回调用次函数
 *@param userLocation 新的用户位置
 */
- (void)didUpdateUserHeading:(BMKUserLocation *)userLocation
{
    NSLog(@"heading is %@", userLocation.heading);
    [self.mapView updateLocationData:userLocation];
}

//处理位置坐标更新
- (void)didUpdateBMKUserLocation:(BMKUserLocation *)userLocation
{
    NSLog(@"当前的坐标是: %f,%f",userLocation.location.coordinate.latitude,userLocation.location.coordinate.longitude);
    
    //这句话的作用就是把地图的中心设置成定位过后的坐标
    self.mapView.centerCoordinate = userLocation.location.coordinate;
    [self.mapView updateLocationData:userLocation];
    
    //地图比例尺级别 3- 21 数字越大 比例尺越小
    self.mapView.zoomLevel = 15.f;
    
    //显示比例尺 - 在左下角
    self.mapView.showMapScaleBar = YES;
    self.mapView.mapScaleBarPosition = CGPointMake(self.view.frame.size.width * 0.05, self.view.frame.size.height *0.9);
    

    
    //当点击定位按钮 实现定位之后 马上关闭定位功能(如果不实现 那么就会一直更新坐标 重复显示)
    self.mapView.showsUserLocation = NO;
    [_locService stopUserLocationService];
    
    _userLocation = userLocation;
    
    //添加标注
    [self addPointAnnotation];

    
    
}
  • 实现添加标注
/**
 * 添加标注
 */
- (void)addPointAnnotation{
    
    // 添加一个pointAnnotation
    BMKPointAnnotation * pointAnnotation = [[BMKPointAnnotation alloc]init];
    CLLocationCoordinate2D coor;
    coor.latitude = _userLocation.location.coordinate.latitude;
    coor.longitude = _userLocation.location.coordinate.longitude;
    pointAnnotation.coordinate = coor;

    [_mapView addAnnotation:pointAnnotation];
    
    NSLog(@"添加标注的位置: %f,%f",_userLocation.location.coordinate.latitude,_userLocation.location.coordinate.longitude);
    
}

效果


IOS - 百度地图自定义标注的气泡_第1张图片
Paste_Image.png

我只是简单的改变了一下气泡的样式,在气泡中自定义了一些按钮,接下来就可以实现按钮的点击事件。

你可能感兴趣的:(IOS - 百度地图自定义标注的气泡)