腾讯地图个性图层(手绘地图,自定义多个大头针)

7,337 阅读2分钟

腾讯地图api官网: lbs.qq.com/

开发文档:lbs.qq.com/mobile/iOSM…

我这里选择的是3Dsdk

项目的一个效果大致如果

1.1  这个个性话图层是需要上传一些项目图层的图片(手绘地图):lbs.qq.com/mobile/iOSM…

//创建自定义图层类    
QCustomLayer *testlayer = [[QCustomLayer alloc] init];    
testlayer.layerID = TenxunMapLayerID;    
// 将自定义图层添加到地图上
[self.mapView addCustomLayer:testlayer];

TenxunMapLayerID 这个可以询问上传个性话图层的同事要。

1.2  地图常用到的代理方法

 #pragma mark - QMapViewDelegate

//获取开始定位的状态
- (void)mapViewWillStartLocatingUser:(QMapView *)mapView {    
    YMLog(@"%@",mapView);
}

//获取停止定位的状态
- (void)mapViewDidStopLocatingUser:(QMapView *)mapView {    
    YMLog(@"%@",mapView);
}

//刷新位置  如果这块不关闭的话,会一直调用这个代理函数
- (void)mapView:(QMapView *)mapView didUpdateUserLocation:(QUserLocation *)userLocation updatingLocation:(BOOL)updatingLocation {    [self.mapView setShowsUserLocation:NO];    //用户当前的经纬度    longitude = [NSNumber numberWithDouble:userLocation.location.coordinate.longitude];    latitude = [NSNumber numberWithDouble:userLocation.location.coordinate.latitude];

    QCoordinateSpan span = QCoordinateSpanMake(0.1, 0.1);
    QCoordinateRegion regin = QCoordinateRegionMake(userLocation.location.coordinate,span);
    [self.mapView setRegion:regin animated:YES];
     //添加大头针
    QPointAnnotation *annotation = [[QPointAnnotation alloc] init];
    annotation.title = @"你当前的位置";
    [annotation setCoordinate:userLocation.location.coordinate];
    [self.mapView addAnnotation:annotation];

}

注:自定义大头针其实类似于tableviewcell的一个自定义,如2.1

//marker的render
- (QAnnotationView *)mapView:(QMapView *)mapView viewForAnnotation:(id<QAnnotation>)annotation{
    if ([annotation isKindOfClass:[DNPointAnnotation class]]) {
        static NSString *pointReuseIndetifier = @"pointReuseIndetifier";
        DNAnnotationView *render = (DNAnnotationView *)[mapView dequeueReusableAnnotationViewWithIdentifier:pointReuseIndetifier];
        if (render == nil)        { 
           render = [[DNAnnotationView alloc] initWithAnnotation:annotation reuseIdentifier:pointReuseIndetifier];
        }
        DNPointAnnotation *pAnnotation = (DNPointAnnotation *)annotation;
        render.imgUrl = pAnnotation.image;
        render.titleStr = pAnnotation.facilities;
        return render;
    }
    return nil;
}



//选中大头针的方法
- (void)mapView:(QMapView *)mapView didSelectAnnotationView:(QAnnotationView *)view {
    if ([view.annotation isKindOfClass:[QAnnotationView class]]) {
        view.image = [UIImage imageNamed:@"图片marker2x"];
    }}



//取消大头针的方法
- (void)mapView:(QMapView *)mapView didDeselectAnnotationView:(QAnnotationView *)view {
    if ([view.annotation isKindOfClass:[QAnnotationView class]]) {
        view.image = [UIImage imageNamed:@"anchor point"];
    }}

2.1  自定义大头针,继承QAnnotationView

根据业务需求添加自定义参数传入数据

@interface DNAnnotationView : QAnnotationView
/** 图片 */
@property (nonatomic, copy) NSString                    *imgUrl;
/** 标题 */
@property (nonatomic, copy) NSString                    *titleStr;
@end

.m文件的逻辑(未封装)

#import "DNAnnotationView.h"
#import "YMStringSize.h"
@interface DNAnnotationView ()
/** 容器 */
@property (nonatomic, weak) UIView                 *contentV;
/** 图片 */
@property (nonatomic, weak) UIImageView                 *img;
/** 下标题 */
@property (nonatomic, weak) UILabel                 *titleL;
@end
@implementation DNAnnotationView
- (instancetype)initWithAnnotation:(id<QAnnotation>)annotation reuseIdentifier:(NSString *)reuseIdentifier {
    if (self = [super initWithAnnotation:annotation reuseIdentifier:reuseIdentifier])       { 
          [self initSubViews];
       }
       return self;
}

- (void)initSubViews {
    /** 容器 */
    UIView *contentV = [[UIView alloc] init];
    contentV.backgroundColor = [UIColor clearColor];
    [self addSubview:contentV];
    self.contentV = contentV;
    /** 图片 */
    UIImageView *img = [[UIImageView alloc] init];
    img.frame = CGRectMake(0, 0, 64, 60);
    [self.contentV addSubview:img];
    self.img = img;
      /** 下标题 */
    UILabel *titleL = [[UILabel alloc] init];
    titleL.textColor = [YMColor color292C33];
    titleL.font = LabelFontRegular(13);
    titleL.textAlignment = NSTextAlignmentCenter;
    titleL.backgroundColor = [UIColor whiteColor];
    [self.contentV addSubview:titleL];
    self.titleL = titleL;
}

- (void)setImgUrl:(NSString *)imgUrl {
    _imgUrl = imgUrl;
    self.img.image = [UIImage imageNamed:imgUrl];
}

- (void)setTitleStr:(NSString *)titleStr {
    _titleStr = titleStr;
    /** 下标题 */
    CGSize titleSize = [YMStringSize ym_sizeWithText:titleStr font:LabelFontRegular(13) maxW:SCREEN_WIDTH];
    CGFloat titleY = CGRectGetMaxY(self.img.frame) + 5;
    self.titleL.ym_x = 5;
    self.titleL.ym_y = titleY;
    self.titleL.ym_height = titleSize.height;
    self.titleL.ym_width = titleSize.width + 30;
    self.titleL.layer.cornerRadius = titleSize.height * 0.5;
    self.titleL.layer.masksToBounds = YES;

    if (titleSize.width > self.img.ym_width) {
        self.contentV.ym_width = titleSize.width; 
       self.img.ym_centerX = self.titleL.ym_centerX;
    } else {
        self.contentV.ym_width = self.img.ym_width;
    }
    self.titleL.text = titleStr;
    CGFloat wide =  self.contentV.ym_width;
    CGFloat height = self.titleL.ym_bottom;
    self.frame = CGRectMake(0, 0, wide, height);
}
@end

3.1 项目上常用的的方法

如:地图上定位N个大头针

1.如果是2Dsdk的话用循环添加大头针到地图上

for (NSInteger i = 0; i < self.datasource.count; i++) {
        DNHandDrawnMapModel *model = self.datasource[i];
        CLLocationCoordinate2D coordinate;
        coordinate.latitude = [model.latitude doubleValue];
        coordinate.longitude = [model.longitude doubleValue];

//这里是自定义大头针
        DNPointAnnotation *annotation = [[DNPointAnnotation alloc] initWithCoordinate:coordinate];
        annotation.image = @"解说";
        annotation.name = model.name;
        annotation.address = model.address;
        annotation.phone = model.phone;
        annotation.facilities = model.name;
        [self.mapView addAnnotation:annotation];
//设置跟随到第一个大头针的位置
        if (i == 0) {
            self.mapView.centerCoordinate = annotation.coordinate; //跟随到指定位置
        }
}

2.如果是3Dsdk的话用循环添加大头针到地图上

// 点标注坐标
CLLocationCoordinate2D coordinates[4];
coordinates[0] = CLLocationCoordinate2DMake(40.041554,116.271508);
coordinates[1] = CLLocationCoordinate2DMake(40.041652,116.274619);
coordinates[2] = CLLocationCoordinate2DMake(40.03863,116.271787);
coordinates[3] = CLLocationCoordinate2DMake(40.038745,116.275134);
    
// 计算最小外接区域
QCoordinateRegion region = QBoundingCoordinateRegionWithCoordinates(coordinates, 4);
// 更新可见region
[self.mapView setRegion:region edgePadding:UIEdgeInsetsZero animated:YES];

注意:使用腾讯地图api如果遇到比较难解决的问题可以在控制台->个人中心->我的工单,创建工单请求技术支持,但是收到的答复可能会比较晚。