百度地图开发之自定义大头针

最新推荐文章于 2021-05-27 04:18:40 发布

置顶木木码

最新推荐文章于 2021-05-27 04:18:40 发布

阅读量1.2k

点赞数 1

分类专栏： iOS开发文章标签：百度地图自定义大头针

本文链接：https://blog.csdn.net/sinat_29499109/article/details/54139665

版权

iOS开发专栏收录该内容

11 篇文章 0 订阅

订阅专栏

前言

前段时间老板在项目里加一个需求,类似ipadQQ版附近的人那样,显示附近所有的注册用户,话说去看QQ的附近的人时就知道肯定是自定的大头针了,说实话,一开始我是拒绝的,原因有两点:其一就是个人觉得手机做这样的UI显示起来的话有点不好看,其二就是本人百度地图没接触过,但是没办法啊,老板加的需求,你只能硬着头皮,那就是干,接下来就详细的说一下具体的实现步骤.

实现步骤

简单的说就是导入百度地图的SDK,这个大家肯定都会,就不多说了
这个自定义大头针,其实说白了,就是自己新建一个类,继承百度地图的BMKAnnotationView这个类
就是你要自定义一个模型继承BMKAnnotation这个百度大头针模型的模型,然后你就可以愉快的做自己的事情了

具体实现详情

继承BMKAnnotationView类的自定义视图,下面直接贴代码
==.h文件代码==
- ==自定义视图的点击事件时必须要把百度地图的大头针的frame重新赋值==
- 注意点:创建自定义view时直接继承BMKAnnotationView时,创建成功是要把头文件改成
- #import <BaiduMapAPI_Map/BMKMapComponent.h>
- #import <BaiduMapAPI_Base/BMKBaseComponent.h>

#import <BaiduMapAPI_Map/BMKMapComponent.h>
#import <BaiduMapAPI_Base/BMKBaseComponent.h>

@interface DWERectAnnotationView : BMKAnnotationView
/**技师头像*/
@property (nonatomic, strong) UIImage *headerImage;
/**性别*/
@property (nonatomic, assign) int sex;
/**点击点击回调*/
@property (nonatomic, copy) void(^clickImageViewBlock) (void);

@end

@interface DWEXXKAnnotationView : BMKAnnotationView
/**店面头像*/
@property (nonatomic, strong) UIImage *nameImage;
/**注册技师个数*/
@property (nonatomic, assign) int jsCount;
/**点击回调*/
@property (nonatomic, copy) void(^clickImageBlock) (void);

@end

==.m文件==

#import "DWERectAnnotationView.h"
#import "Masonry.h"
#import "DWESexAgeView.h"

@interface DWERectAnnotationView()
{
    UIView              *_contentView;
    UIImageView         *_bgImageView;
    UIImageView         *_headerImageView;
    DWESexView          *_sexView;
}

@end

@implementation DWERectAnnotationView

- (instancetype)initWithAnnotation:(id<BMKAnnotation>)annotation reuseIdentifier:(NSString *)reuseIdentifier
{
    if (self = [super initWithAnnotation:annotation reuseIdentifier:reuseIdentifier])
    {
        [self initSubViews];
    }
    return self;
}

- (void)initSubViews
{
    //自定义大头针添加的自定义点击事件必须重新设置系统自带大头针的frame,否则自定义的点击事件不响应
    CGFloat wide = isPad ? 70 : 50;
    self.frame = CGRectMake(0, 0, wide, wide);

    _contentView = [[UIView alloc]init];
    _contentView.backgroundColor = [UIColor clearColor];

    _bgImageView = [[UIImageView alloc]init];
    _bgImageView.image = [UIImage imageNamed:@"map_porbg"];
    [_contentView addSubview:_bgImageView];

    _headerImageView = [[UIImageView alloc]init];
    _headerImageView.center = CGPointMake(_contentView.frame.size.width/2, _contentView.frame.size.height/2);
    CGFloat cornerRadius = isPad ? 30 : 20;
    _headerImageView.layer.cornerRadius = cornerRadius;
    _headerImageView.layer.masksToBounds = YES;
    _headerImageView.userInteractionEnabled = YES;
    UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(tapHeaderImageView)];
    [_headerImageView addGestureRecognizer:tap];
    [_contentView addSubview:_headerImageView];

    _sexView = [DWESexView new];
    _sexView.backgroundColor = [UIColor clearColor];
    [_headerImageView addSubview:_sexView];

    [self addSubview:_contentView];

    [_contentView mas_makeConstraints:^(MASConstraintMaker *make) {
        CGFloat width = isPad ? 70 : 50;
        make.left.and.top.mas_equalTo(0);
        make.width.and.height.mas_equalTo(width);
    }];

    [_bgImageView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.and.top.mas_equalTo(0);
        CGFloat width = isPad ? 75 : 50;
        CGFloat height = isPad ? 95 : 65;
        make.width.mas_equalTo(width);
        make.height.mas_equalTo(height);
    }];

    [_headerImageView mas_makeConstraints:^(MASConstraintMaker *make) {
        CGFloat width = isPad ? 60 : 40;
        CGFloat top = isPad ? 7 : 5;
        CGFloat left = isPad ? 7 : 5;
        make.left.mas_equalTo(left);
        make.top.mas_equalTo(top);
        make.width.and.height.mas_equalTo(width);
    }];

    [_sexView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.and.bottom.mas_equalTo(0);
        CGFloat width = isPad ? 60 : 40;
        make.width.and.height.mas_equalTo(width);
    }];
}

- (void)setHeaderImage:(UIImage *)headerImage
{
    _headerImageView.image = headerImage;
}

- (void)setSex:(int)sex
{
    [_sexView showSex:sex];
}

- (void)tapHeaderImageView
{
    if (_clickImageViewBlock) _clickImageViewBlock();
}

@end

#pragma mark -- 附近休闲咖

@interface DWEXXKAnnotationView()
{
    UIView              *_contentView;
    UIImageView         *_bgImageView;
    UIImageView         *_headerImageView;
    UILabel             *_numberLabel;
}
@end

@implementation DWEXXKAnnotationView

- (instancetype)initWithAnnotation:(id<BMKAnnotation>)annotation reuseIdentifier:(NSString *)reuseIdentifier
{
    if (self = [super initWithAnnotation:annotation reuseIdentifier:reuseIdentifier])
    {
        [self initWithSubView];
    }
    return self;
}

- (void)initWithSubView
{
    //自定义大头针添加的自定义点击事件必须重新设置系统自带大头针的frame,否则自定义的点击事件不响应
    CGFloat wide = isPad ? 70 : 50;
    self.frame = CGRectMake(0, 0, wide, wide);

    _contentView = [[UIView alloc]init];
    _contentView.backgroundColor = [UIColor clearColor];

    _bgImageView = [[UIImageView alloc]init];
    _bgImageView.image = [UIImage imageNamed:@"map_porbg"];
    [_contentView addSubview:_bgImageView];

    _headerImageView = [[UIImageView alloc]init];
    _headerImageView.center = CGPointMake(_contentView.frame.size.width/2, _contentView.frame.size.height/2);
    CGFloat cornerRadius = isPad ? 30 : 20;
    _headerImageView.layer.cornerRadius = cornerRadius;
    _headerImageView.layer.masksToBounds = YES;
    _headerImageView.userInteractionEnabled = YES;
    UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(tapNameImage)];
    [_headerImageView addGestureRecognizer:tap];
    _headerImageView.backgroundColor = [UIColor yellowColor];
    [_contentView addSubview:_headerImageView];

    _numberLabel = [UILabel new];
    _numberLabel.textColor = [UIColor whiteColor];
    _numberLabel.textAlignment = NSTextAlignmentCenter;
    _numberLabel.backgroundColor = [UIColor colorWithWhite:0.f alpha:0.5];
    _numberLabel.font = [UIFont systemFontOfSize:9];
    [_headerImageView addSubview:_numberLabel];

    [self addSubview:_contentView];

    [_contentView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.and.top.mas_equalTo(0);
        CGFloat width = isPad ? 70 : 50;
        make.width.and.height.mas_equalTo(width);
    }];

    [_bgImageView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.and.top.mas_equalTo(0);
        CGFloat width = isPad ? 75 : 50;
        CGFloat height = isPad ? 95 : 65;
        make.width.mas_equalTo(width);
        make.height.mas_equalTo(height);
    }];

    [_headerImageView mas_makeConstraints:^(MASConstraintMaker *make) {
        CGFloat width = isPad ? 60 : 40;
        CGFloat top = isPad ? 7 : 5;
        CGFloat left = isPad ? 7 : 5;
        make.left.mas_equalTo(left);
        make.top.mas_equalTo(top);
        make.width.and.height.mas_equalTo(width);
    }];

    [_numberLabel mas_makeConstraints:^(MASConstraintMaker *make) {
        CGFloat width = isPad ? 60 : 40;
        make.left.and.bottom.mas_equalTo(0);
        make.width.mas_equalTo(width);
    }];
}

- (void)setNameImage:(UIImage *)nameImage
{
    _headerImageView.image = nameImage;
}

- (void)setJsCount:(int)jsCount
{
    _numberLabel.text = [NSString stringWithFormat:@"%d技师",jsCount];
}

- (void)tapNameImage
{
    if (_clickImageBlock) _clickImageBlock();
}

@end

2.自定义模型继承百度地图BMKAnnotation
- 直接贴代码
- ==.h文件==

#import <BaiduMapAPI_Base/BMKBaseComponent.h>
#import <BaiduMapAPI_Map/BMKMapComponent.h>

@interface DWEPointAnnotation : NSObject<BMKAnnotation>
@property (nonatomic, assign) CLLocationCoordinate2D coordinate;
@property (nonatomic, strong) UIImage *image;
/**技师id*/
@property (nonatomic, assign) int jsId;
/**性别*/
@property (nonatomic, assign) int sex;
/**技师个数*/
@property (nonatomic, assign) int jsCount;
/**店面名称*/
@property (nonatomic, strong) NSString *name;
/**地址*/
@property (nonatomic, strong) NSString *locationdes;;
/该点的坐标
- (id)initWithCoordinate:(CLLocationCoordinate2D)coordinate;
@end

==.m文件==

- (id)initWithCoordinate:(CLLocationCoordinate2D)coordinate
{
    if (self = [super init])
    {
        self.coordinate = coordinate;
    }
    return self;
}

实现上面的步骤,就已经完成基本的自定义视图了,剩下的就是直接在地图上显示出来,这个就不一一说了,相信大家都明白该怎么做了如果大家有什么不明白的大家可以下载下面的demo来看看,上面有非常详细的说明,同时也希望大家能看看我现在开发的项目下载地址也贴上去了

demo地址

demo地址:https://git.oschina.net/chentilin/MapAnnotation

项目地址

休闲咖-2千万人的技能分享平台,人人都可以参与，适合每一种职业.
分享是一种生活,也是一种收获. 分享技能,传递价值,改变世界,从我开始。我们期待你的加入。
安卓app下载链接：
http://sj.qq.com/myapp/detail.htm?apkName=com.alligator.xiuxianba
苹果app下载链接：
https://itunes.apple.com/cn/app/xiu-xian-ka/id1160649870?mt=8

木木码

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
百度地图开发之自定义大头针

前言前段时间老板在项目里加一个需求,类似ipadQQ版附近的人那样,显示附近所有的注册用户,话说去看QQ的附近的人时就知道肯定是自定的大头针了,说实话,一开始我是拒绝的,原因有两点:其一就是个人觉得手机做这样的UI显示起来的话有点不好看,其二就是本人百度地图没接触过,但是没办法啊,老板加的需求,你只能硬着头皮,那就是干,接下来就详细的说一下具体的实现步骤.实现步骤简单的说就是导入百度地图的SDK,
复制链接

扫一扫