MKMapView地图相关问题总结

前段时间,在项目上做了一些地图相关的功能,解决了三个特殊需求,在此总结一下,以备日后使用:

1. MKOverlayView的拖动实现;
2. 大头针pin 的拖动实现;
3. 随地图的缩放而缩放的焦点框功能实现;


1. MKOverlayView的拖动实现

首先,直接给MKOverlayView视图本身添加一个拖动手势是不可行的,因为MKOverlayView不是通过简单的addSubview:添加到地图图层上的。

MKOverlayView视图的现实过程:
1.1 使用MKPolygon的addOverlay:方法来添加OverlayView数据
源overlay,其中包括了图层的经纬度坐标数据。

CLLocationCoordinate2D leftUp = CLLocationCoordinate2DMake(center.latitude - gap, center.longitude - gap);
CLLocationCoordinate2D rightUp = CLLocationCoordinate2DMake(center.latitude + gap, center.longitude - gap);
CLLocationCoordinate2D leftDown = CLLocationCoordinate2DMake(center.latitude - gap, center.longitude + gap);
CLLocationCoordinate2D rightDown = CLLocationCoordinate2DMake(center.latitude + gap, center.longitude + gap);
            
CLLocationCoordinate2D coordinates[4] = {leftUp, leftDown, rightUp, rightDown};
MKPolygon *polygon = [MKPolygon polygonWithCoordinates:coordinates count:4];
[m_MapView addOverlay:polygon];

1.2 然后再实现MKMapView的代理方法:

-(MKOverlayView *)mapView:(MKMapView *)mapView viewForOverlay:(id<MKOverlay>)overlay
{
    MKOverlayView *pview = [[MKOverlayView alloc] initWithOverlay:overlay];
    pview.backgroundColor = [[UIColor redColor] colorWithAlphaComponent:0.4f];    

    return pview;
}```

这样就会给地图的图层中嵌入一个指定位置和大小的视图,效果上是与地图合为一体的,可以一起移动和缩放,

也就是说通过`addOverlay: `来添加视图的数据源,然后在

-(MKOverlayView *)mapView:(MKMapView *)mapView viewForOverlay:(id<MKOverlay>)overlay```

方法中去绘制视图本身(图层颜色,也可以绘制文字在上面)。

MKOverlayView的类型参数有以下几种:

数据类 对应view 说明
MKPolygon MKOverlayView 矩形
MKCircle MKCircleView 圆形
MKPolyline MKPolylineView 线条

那如何拖动MKOverlayView呢?

- (CGPoint)convertCoordinate:(CLLocationCoordinate2D)coordinate toPointToView:(nullable UIView *)view

使用上述方法将MKOverlayView的经纬度坐标转化为相对于MKMapView的点坐标,然后在同样的位置加上一个同样大小的透明子视图,给自视图添加拖动手势UIPanGestureRecognizer,每次拖动的时候先使用removeOverlay:删除之前的MKOverlayView,然后再重新以拖动点为中心,加载新的MKOverlayView即可,效果很良好,不会出现闪烁的现象。
由于地图本身可以放大,缩小,移动,所以在这些操作之后也需要调整这个子视图的大小:

//当拖拽,放大,缩小,双击手势开始时调用
- (void)mapView:(MKMapView *)mapView regionWillChangeAnimated:(BOOL)animated
//当拖拽,放大,缩小,双击手势结束时调用
- (void)mapView:(MKMapView *)mapView regionDidChangeAnimated:(BOOL)animated

2. 大头针pin 的拖动实现;

拖动大头针的方法系统API有提供:

  • 新建一个继承<MKAnnotation>协议的大头针数据类,并添加坐标coordinate,title,subtitle属性;
  • 使用addAnnotation:添加大头针数据源,在
-(MKAnnotationView *)mapView:(MKMapView *)mapView viewForAnnotation:(id<MKAnnotation>)annotation

方法中添加大头针视图MKPinAnnotationView,并且设置拖动属性为YES:pin.draggable = YES;

  • 下面方法是拖拽回调方法,在MKAnnotationViewDragStateEnding状态时,调整大头针位置即可
- (void)mapView:(MKMapView *)mapView annotationView:(MKAnnotationView *)view didChangeDragState:(MKAnnotationViewDragState)newState
   fromOldState:(MKAnnotationViewDragState)oldState

最后的效果就是长按大头针,会有一个大头针升起的动画,然后拖动释放又会有大头针落下的动画,效果很炫。

这是使用系统方法实现大头针的拖拽,其实也可以使用1中拖拽MKOverlayView的方法,在大头针的位置放一个透明的子视图,然后拖动这个子视图的同时,移除旧的大头针,再在相应位置添加新的大头针即可。
只不过这就没有大头针升起/落下的动画了,当然,也不用长按大头针才能拖动,你可以自定义。


3. 随地图的缩放而缩放的焦点框功能实现

由于系统没有提供MKMapView的缩放比例,所以得自己计算这个比例:

  • 地图缩放的时候其实是MKCoordinateSpan在变化
typedef struct {
    CLLocationDegrees latitudeDelta;//纬度范围
    CLLocationDegrees longitudeDelta;//纬度范围
} MKCoordinateSpan;
  • 比例计算公式
    float ratio = oldSpanArea/newSpan
    说明:老的span面积/新的span面积
    span面积=latitudeDelta * longitudeDelta

  • 最后计算焦点框的边长
    float width = sqrtf(ratio * (fenceView.frame.size.width * fenceView.frame.size.height));
    然后改变焦点框的frame就可以了。
    当然,最后的计算赋值都在缩放结束后的函数中进行:

//当拖拽,放大,缩小,双击手势结束时调用
- (void)mapView:(MKMapView *)mapView regionDidChangeAnimated:(BOOL)animated

补充:

前几天对地图这边做优化,发现方案三还可以有另一种做法:
可以通过给mapview对象添加:
UIPanGestureRecognizer,UITapGestureRecognizer,UIPinchGestureRecognizer
三种手势来监听对地图的拖动,点击,缩放的事件,既然监听到了这些事件,那么后面的事情就好办了。

当然,不要忘了在代码中实现UIGestureRecognizerDelegate的这个方法:

// called when the recognition of one of gestureRecognizer or otherGestureRecognizer would be blocked by the other
// return YES to allow both to recognize simultaneously. the default implementation returns NO (by default no two gestures can be recognized simultaneously)
//
// note: returning YES is guaranteed to allow simultaneous recognition. returning NO is not guaranteed to prevent simultaneous recognition, as the other gesture's delegate may return YES
- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer
{
    return YES;
}

这个方法的意思是:
当一个手势被另外一个手势堵塞后,就会调用这个回调,默认是返回NO的,
如果返回YES的话,才会允许多个手势共存。

以上补充已在demo中添加。


Demo下载链接:CamouflageLocationDemo

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

推荐阅读更多精彩内容