百度地圖 Api 使用 -- 軌跡圖及自定義標(biāo)記

首先,先說說我用到的幾個(gè)框架:
BaiduMapAPI_Base.framework 百度地圖使用時(shí)必不可少的一個(gè)基礎(chǔ)框架
BaiduMapAPI_Map.framework 百度地圖可以自定義軌跡及 Annotation 的框架
BaiduMapAPI_Location.framework百度地圖中的定位框架

當(dāng)然首先必不可少的就是根據(jù)官方的文檔申請一個(gè) key ,做好使用地圖前的準(zhǔn)備, 此處不再詳細(xì)談?wù)?

可是基于默認(rèn)的地圖包來說,我偏偏要做成下圖中的效果:


1222.png

好了,言歸正傳,首先,我們先把定位搞好:

  • 創(chuàng)建地圖,先把地圖給顯示在屏幕上
- (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];
}

對了按照其官方文檔,我們還要實(shí)現(xiàn)以下方法(目的是能夠釋放內(nèi)存,還是相當(dāng)重要的),代理的指定也在里面:

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

- (void)viewWillDisappear:(BOOL)animated{

    [_mapView viewWillDisappear];
    _mapView.delegate = nil; //就是這句影響內(nèi)存釋放
}

下面,就要來自定義一個(gè)小汽車作為Annotation來顯示在界面上, 值得注意的是 BMKAnnotationView不是隨意就可以創(chuàng)建的,而是需要在本身的 mapView 的 Delegate 方法中返回一個(gè) BMKAnnotationView 對象,簡言之就是在代理中創(chuàng)建

  • 先獲取到定位,添加一個(gè) BMKPointAnnotation
- (void)didUpdateBMKUserLocation:(BMKUserLocation *)userLocation{
    [_mapView setCenterCoordinate:userLocation.location.coordinate animated:YES];
    [self setAnnotationWithLocation:userLocation]; //定位的 Annotation 調(diào)用
    [self setMapLineWithLocation:userLocation];
}

其實(shí)在下面方法中的 Annotation 在定義時(shí)候只是表示在地圖中添加了一個(gè) Annotation ,而實(shí)際的形狀則由mapView 的代理方法- (BMKAnnotationView *)mapView:(BMKMapView *)mapView viewForAnnotation:(id <BMKAnnotation>)annotation來決定

/**
 *  設(shè)置地圖的標(biāo)注
 */
- (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:@"時(shí)速:%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;
        
    }
    
    //設(shè)置方向角度
    MyAnnotation *annotationView = (MyAnnotation*)[_mapView viewForAnnotation:_pointAnnotation];
    annotationView.bgImage.transform = CGAffineTransformMakeRotation((dir + 90 - _mapView.rotation) * M_PI / 180);
}

來看看地圖 annotation 的改變(如果返回 nil 則使用默認(rèn))

- (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的實(shí)現(xiàn)

@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 : 看到這里如果你懂了,那么下面的軌跡,你也很難不懂了...

下面就來證實(shí)我上面說的

  • 首先你還是要在獲取到位置之后用NSMutableArray來保存很多個(gè)位置信息,也就是這個(gè)家伙??CLLocation,當(dāng)然你要做一些條件過濾(小于5米不記錄等等),然后創(chuàng)建BMKPolyline來添加到地圖中,創(chuàng)建方法用+ (BMKPolyline *)polylineWithCoordinates:(CLLocationCoordinate2D *)coords count:(NSUInteger)count;反正我用的這個(gè),隨便都行,但是要能顯示出來哦,
    接著按照##notice : 看到這里如果你懂了,那么下面的軌跡,你也很難不懂了...以上的說法,實(shí)現(xiàn) mapView 中的代理方法??- (BMKOverlayView *)mapView:(BMKMapView *)mapView viewForOverlay:(id<BMKOverlay>)overlay,在這個(gè)代理方法里面,想怎么搞就怎么搞,想要什么效果就設(shè)置什么效果.

代碼如下:

  • 我們要在地圖上添加的軌跡
/**
 *  設(shè)置運(yùn)動軌跡地圖路徑
 */
- (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

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容