自定义一个地图弹出气泡

本文基于高德地图之定义的一个可点击气泡。效果如下图1.0所示:


图1.0

实现原理:自定义一个LJAnnomationView继承自高德地图的MAAnnotationView,在LJAnnomationView上放一个自定义的按钮(本文放了一个自定义的LJButton,LJButton的自定义方法可以见我的“自定义按钮一”这篇文章,地址www.jianshu.com/p/da7a32a8660d),当用户点击自定义的气泡时,通过代理方法把点击事件传递出去处理即可。具体实现代码如下。

一、首先LJAnnomationView.h文件的实现代码如下:

#import <MAMapKit/MAMapKit.h>

@protocol LJAnnomationViewDelegate<NSObject>

@optional

-(void)didselectPaopaoviewWithTag:(NSInteger)tage;

@end@interface LJAnnomationView : MAAnnotationView

//构造方法

-(instancetype)initWithAnnotation:(id)annotation reuseIdentifier:(NSString *)reuseIdentifier;

@property(weak,nonatomic)iddelegate;

@end

二、其次,LJAnnomationView.m文件的代码如下

#import "LJAnnomationView.h"

#import "LJButton.h"

#import "Tool.h"

#define TEXE_SIZE CGSizeMake(0x1.fffffep+127f, 44)

@interface LJAnnomationView (){  

  LJButton * _buton;//用按钮代替可点击气泡,这是一个自定义按钮}@end@implementation LJAnnomationView//构造方法-(instancetype)initWithAnnotation:(id)annotation reuseIdentifier:(NSString *)reuseIdentifier

{

self = [super initWithAnnotation:annotation reuseIdentifier:reuseIdentifier];

if (self) {

self.userInteractionEnabled = YES;

_buton = [LJButton buttonWithType:UIButtonTypeCustom];

//获取指定文字的长度

CGFloat widt = [Tool widthForText:annotation.title withFont:[UIFont systemFontOfSize:12] withSize:TEXE_SIZE];

_buton.frame = CGRectMake(0-(widt+30)*0.5, -30, widt+30, 35);

[_buton setBackgroundImage:[UIImage imageNamed:@"popup.png"] forState:UIControlStateNormal];

[_buton setImage:[UIImage imageNamed:@"item_bike.png"] forState:UIControlStateNormal];

[_buton setTitle:annotation.title forState:UIControlStateNormal];

_buton.titleRect = CGRectMake(26, 0, widt, 35);

_buton.imageRect = CGRectMake(0, 1, 25, 25);

_buton.bagImageRect = CGRectMake(0, 0, widt+30, 35);

_buton.titleLabel.font = [UIFont systemFontOfSize:12];

_buton.titleLabel.textAlignment = NSTextAlignmentLeft;

NSString * tags = annotation.subtitle;

_buton.tag = [tags integerValue];

[_buton setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];

[_buton addTarget:self action:@selector(buttAction:) forControlEvents:UIControlEventTouchUpInside];

[self addSubview:_buton];

}

return self;

}

//点击按钮事件

-(void)buttAction:(UIButton*)bt

{

//把点击事件传递过去

[self.delegate didselectPaopaoviewWithTag:bt.tag];

}

//重写这个方法,如果不重写,用户点击按钮将不响应

-(UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event {

UIView *view = [super hitTest:point withEvent:event];

if (view == nil) {

CGPoint tempoint = [_buton convertPoint:point fromView:self];

if (CGRectContainsPoint(_buton.bounds, tempoint)) {

view = _buton;

}

}

return view;

}

@end

三、自定义的气泡写好后,接下来就是使用了。如何使用呢?

首先创建高德地图MAMapView,把MAMapView加到控制器中显示出来,然后创建一个MAPointAnnotation,然后加到地图中去,代码如下:

MAPointAnnotation * ann = [[MAPointAnnotation alloc] init];

ann.coordinate = _starCoord;

ann.title = @"我是测试地址";

ann.subtitle = @"123";

[self.mapview addAnnotation:ann];

四、接着实现MAMapView的代理方法,在这个方法自定义气泡即可

- (MAAnnotationView *)mapView:(MAMapView *)mapView viewForAnnotation:(id)annotation

{

if ([annotation isKindOfClass:[MAPointAnnotation class]])

{

static NSString * poiIdentfier = @"LJIdtyfire";

LJAnnomationView * ljAnnotationView = (LJAnnomationView*)[mapView dequeueReusableAnnotationViewWithIdentifier:poiIdentfier];

if (ljAnnotationView==nil) {

ljAnnotationView = [[LJAnnomationView alloc] initWithAnnotation:annotation reuseIdentifier:poiIdentfier];

ljAnnotationView.delegate = self;

}

return ljAnnotationView;

}

return nil;

}

五、别忘了,当用户点击气泡的时候,还得交互,所以还得实现LJAnnomationView里的协议方法。

-(void)didselectPaopaoviewWithTag:(NSInteger )tage

{

NSLog(@"气泡被点击");

}

最后就完成了一个自定义的气泡了,至于其他各种不同的气泡,都可以自定义,方法跟上面所说的差不多,当然仁者见仁,智者见智,每个人都有自己的头脑,这不是唯一的方法,这只是其中的一种勉强可行的方法。

请各位多多指教,多交流。祝生活愉快!

  ------------蒋

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

推荐阅读更多精彩内容