百度地图 Api 使用 -- 轨迹图及自定义标记

首先,先说说我用到的几个框架:
BaiduMapAPI_Base.framework 百度地图使用时必不可少的一个基础框架
BaiduMapAPI_Map.framework 百度地图可以自定义轨迹及 Annotation 的框架
BaiduMapAPI_Location.framework百度地图中的定位框架

当然首先必不可少的就是根据官方的文档申请一个 key ,做好使用地图前的准备, 此处不再详细谈论.

可是基于默认的地图包来说,我偏偏要做成下图中的效果:


1222.png

好了,言归正传,首先,我们先把定位搞好:

  • 创建地图,先把地图给显示在屏幕上
- (void)viewDidLoad {
    [super viewDidLoad];
    BMKMapView *mapView = [[BMKMapView alloc] initWithFrame:self.view.frame];
    mapView.mapType = BMKMapTypeStandard;
    mapView.overlookEnabled = NO;
    mapView.showsUserLocation = YES;
    _mapView = mapView;
    [self.view addSubview:_mapView];
}

对了按照其官方文档,我们还要实现以下方法(目的是能够释放内存,还是相当重要的),代理的指定也在里面:

- (void)viewWillAppear:(BOOL)animated{
    [_mapView viewWillAppear];
    _mapView.delegate = self;
    [[UIApplication sharedApplication] setIdleTimerDisabled:YES];
}

- (void)viewWillDisappear:(BOOL)animated{

    [_mapView viewWillDisappear];
    _mapView.delegate = nil; //就是这句影响内存释放
}

下面,就要来自定义一个小汽车作为Annotation来显示在界面上, 值得注意的是 BMKAnnotationView不是随意就可以创建的,而是需要在本身的 mapView 的 Delegate 方法中返回一个 BMKAnnotationView 对象,简言之就是在代理中创建

  • 先获取到定位,添加一个 BMKPointAnnotation
- (void)didUpdateBMKUserLocation:(BMKUserLocation *)userLocation{
    [_mapView setCenterCoordinate:userLocation.location.coordinate animated:YES];
    [self setAnnotationWithLocation:userLocation]; //定位的 Annotation 调用
    [self setMapLineWithLocation:userLocation];
}

其实在下面方法中的 Annotation 在定义时候只是表示在地图中添加了一个 Annotation ,而实际的形状则由mapView 的代理方法- (BMKAnnotationView *)mapView:(BMKMapView *)mapView viewForAnnotation:(id <BMKAnnotation>)annotation来决定

/**
 *  设置地图的标注
 */
- (void)setAnnotationWithLocation:(BMKUserLocation*)userLocation{
    double dir = userLocation.location.course;
    CLLocationSpeed speed = userLocation.location.speed;
    _pointAnnotation.title = [NSString stringWithFormat:@"我(精确度:%.0f m)",userLocation.location.horizontalAccuracy];
    _pointAnnotation.subtitle = [NSString stringWithFormat:@"时速:%0.1fKm/h",(speed<0? 0:speed) * 3.6f];
    _pointAnnotation.coordinate = userLocation.location.coordinate;
    if (![_mapView.annotations containsObject:_pointAnnotation]) {
        [_mapView addAnnotation:_pointAnnotation];
        [_mapView selectAnnotation:_pointAnnotation animated:YES];
    }
    
    //误差范围指示器
    static BMKCircle *circle;
    if (circle == nil) {
        circle = [BMKCircle circleWithCenterCoordinate:userLocation.location.coordinate radius:userLocation.location.horizontalAccuracy];
        [_mapView addOverlay:circle];
    }else{
        
        circle.radius = 10;//userLocation.location.horizontalAccuracy;
        circle.coordinate = userLocation.location.coordinate;
        
    }
    
    //设置方向角度
    MyAnnotation *annotationView = (MyAnnotation*)[_mapView viewForAnnotation:_pointAnnotation];
    annotationView.bgImage.transform = CGAffineTransformMakeRotation((dir + 90 - _mapView.rotation) * M_PI / 180);
}

来看看地图 annotation 的改变(如果返回 nil 则使用默认)

- (BMKAnnotationView *)mapView:(BMKMapView *)mapView viewForAnnotation:(id <BMKAnnotation>)annotation{
    MyAnnotation *annotationView = (MyAnnotation*)[mapView dequeueReusableAnnotationViewWithIdentifier:@"myAnno"];
    if (annotationView == nil) {
        annotationView = [[MyAnnotation alloc] initWithAnnotation:annotation reuseIdentifier:@"myAnno"];
    }
    return annotationView;
}

自定义 Annotation 文件MyAnnotation.m的实现

@implementation MyAnnotation
- (id)initWithAnnotation:(id<BMKAnnotation>)annotation reuseIdentifier:(NSString *)reuseIdentifier{
    self = [super initWithAnnotation:annotation reuseIdentifier:reuseIdentifier];
    if (self) {
//        self.backgroundColor = [UIColor redColor];
        self.frame = CGRectMake(0, 0, 30, 30);
        
        UIImageView *imgView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"location"]];
        imgView.frame = CGRectMake(0, 0, 30, 30);
        imgView.contentMode = UIViewContentModeScaleAspectFit;
        _bgImage = imgView;
        self.paopaoView = nil;
        [self addSubview:imgView];   
    }
    return self;
}
@end

notice : 看到这里如果你懂了,那么下面的轨迹,你也很难不懂了...

下面就来证实我上面说的

  • 首先你还是要在获取到位置之后用NSMutableArray来保存很多个位置信息,也就是这个家伙👉CLLocation,当然你要做一些条件过滤(小于5米不记录等等),然后创建BMKPolyline来添加到地图中,创建方法用+ (BMKPolyline *)polylineWithCoordinates:(CLLocationCoordinate2D *)coords count:(NSUInteger)count;反正我用的这个,随便都行,但是要能显示出来哦,
    接着按照##notice : 看到这里如果你懂了,那么下面的轨迹,你也很难不懂了...以上的说法,实现 mapView 中的代理方法👉- (BMKOverlayView *)mapView:(BMKMapView *)mapView viewForOverlay:(id<BMKOverlay>)overlay,在这个代理方法里面,想怎么搞就怎么搞,想要什么效果就设置什么效果.

代码如下:

  • 我们要在地图上添加的轨迹
/**
 *  设置运动轨迹地图路径
 */
- (void)setMapLineWithLocation:(BMKUserLocation*)userLocation{
    
    if (userLocation.location.horizontalAccuracy > 5) {
        return;
    }
    
    if (lineArray == nil) {
        lineArray = [NSMutableArray new];
        return;
    }
    
    CLLocation *last = lineArray.lastObject;
    CLLocationDistance distance = [userLocation.location distanceFromLocation:last];
    if ((last.coordinate.longitude == userLocation.location.coordinate.longitude
         &&last.coordinate.latitude == userLocation.location.coordinate.latitude)
        || (distance < 4 && lineArray.count != 0)) {
        return;
    }
    [lineArray addObject:userLocation.location];
    CLLocationCoordinate2D *coords = new CLLocationCoordinate2D[lineArray.count];
    for (int i = 0; i < lineArray.count; i++) {
        CLLocation *loc = lineArray[i];
        coords[i] = loc.coordinate;
    }
    
    if (lineArray.count <= 1) {
        return;
    }
    static BMKPolyline *line;
    if (line) {
        [line setPolylineWithCoordinates:coords count:lineArray.count];
        return;
    }
    line = [BMKPolyline polylineWithCoordinates:coords count:lineArray.count];
    [_mapView addOverlay:line];
}
  • 我们想要的样式
- (BMKOverlayView *)mapView:(BMKMapView *)mapView viewForOverlay:(id<BMKOverlay>)overlay{

    if ([overlay isKindOfClass:[BMKPolyline class]]) {
        BMKPolylineView *overlayView = [[BMKPolylineView alloc] initWithOverlay:overlay];
        overlayView.lineWidth = 3;
        overlayView.isFocus = YES;
        overlayView.strokeColor = [UIColor colorWithRed:0.167 green:0.840 blue:0.043 alpha:0.500];
        return overlayView;
    }
    
    if ([overlay isKindOfClass:[BMKCircle class]]) {
        BMKCircleView *circleView = [[BMKCircleView alloc] initWithCircle:overlay];
        circleView.fillColor = [UIColor colorWithRed:0.989 green:0.417 blue:0.057 alpha:0.328];
        circleView.strokeColor = [UIColor colorWithRed:0.989 green:0.417 blue:0.057 alpha:0.879];
        circleView.lineWidth = 0;
        return circleView;
    }
    
    return nil;
}

代码地址 : https://github.com/voisen/BaiduMapDemo

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 221,820评论 6 515
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 94,648评论 3 399
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 168,324评论 0 360
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 59,714评论 1 297
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 68,724评论 6 397
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 52,328评论 1 310
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,897评论 3 421
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,804评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 46,345评论 1 318
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,431评论 3 340
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,561评论 1 352
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 36,238评论 5 350
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,928评论 3 334
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,417评论 0 24
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,528评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,983评论 3 376
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,573评论 2 359

推荐阅读更多精彩内容