MKMapView地圖相關(guān)問題總結(jié)

前段時間辱挥,在項目上做了一些地圖相關(guān)的功能罩旋,解決了三個特殊需求,在此總結(jié)一下拯坟,以備日后使用:

1. MKOverlayView的拖動實現(xiàn)但金;
2. 大頭針pin 的拖動實現(xiàn);
3. 隨地圖的縮放而縮放的焦點框功能實現(xiàn)郁季;


1. MKOverlayView的拖動實現(xiàn)

首先冷溃,直接給MKOverlayView視圖本身添加一個拖動手勢是不可行的,因為MKOverlayView不是通過簡單的addSubview:添加到地圖圖層上的梦裂。

MKOverlayView視圖的現(xiàn)實過程:
1.1 使用MKPolygon的addOverlay:方法來添加OverlayView數(shù)據(jù)
源overlay似枕,其中包括了圖層的經(jīng)緯度坐標(biāo)數(shù)據(jù)。

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 然后再實現(xiàn)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: `來添加視圖的數(shù)據(jù)源彪杉,然后在

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

方法中去繪制視圖本身(圖層顏色毅往,也可以繪制文字在上面)。

MKOverlayView的類型參數(shù)有以下幾種:

數(shù)據(jù)類 對應(yīng)view 說明
MKPolygon MKOverlayView 矩形
MKCircle MKCircleView 圓形
MKPolyline MKPolylineView 線條

那如何拖動MKOverlayView呢派近?

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

使用上述方法將MKOverlayView的經(jīng)緯度坐標(biāo)轉(zhuǎn)化為相對于MKMapView的點坐標(biāo)攀唯,然后在同樣的位置加上一個同樣大小的透明子視圖,給自視圖添加拖動手勢UIPanGestureRecognizer渴丸,每次拖動的時候先使用removeOverlay:刪除之前的MKOverlayView侯嘀,然后再重新以拖動點為中心另凌,加載新的MKOverlayView即可,效果很良好戒幔,不會出現(xiàn)閃爍的現(xiàn)象吠谢。
由于地圖本身可以放大,縮小诗茎,移動工坊,所以在這些操作之后也需要調(diào)整這個子視圖的大小:

//當(dāng)拖拽敢订,放大王污,縮小,雙擊手勢開始時調(diào)用
- (void)mapView:(MKMapView *)mapView regionWillChangeAnimated:(BOOL)animated
//當(dāng)拖拽楚午,放大昭齐,縮小,雙擊手勢結(jié)束時調(diào)用
- (void)mapView:(MKMapView *)mapView regionDidChangeAnimated:(BOOL)animated

2. 大頭針pin 的拖動實現(xiàn)矾柜;

拖動大頭針的方法系統(tǒng)API有提供:

  • 新建一個繼承<MKAnnotation>協(xié)議的大頭針數(shù)據(jù)類阱驾,并添加坐標(biāo)coordinate,title怪蔑,subtitle屬性里覆;
  • 使用addAnnotation:添加大頭針數(shù)據(jù)源,在
-(MKAnnotationView *)mapView:(MKMapView *)mapView viewForAnnotation:(id<MKAnnotation>)annotation

方法中添加大頭針視圖MKPinAnnotationView缆瓣,并且設(shè)置拖動屬性為YES:pin.draggable = YES;

  • 下面方法是拖拽回調(diào)方法租谈,在MKAnnotationViewDragStateEnding狀態(tài)時,調(diào)整大頭針位置即可
- (void)mapView:(MKMapView *)mapView annotationView:(MKAnnotationView *)view didChangeDragState:(MKAnnotationViewDragState)newState
   fromOldState:(MKAnnotationViewDragState)oldState

最后的效果就是長按大頭針捆愁,會有一個大頭針升起的動畫割去,然后拖動釋放又會有大頭針落下的動畫,效果很炫昼丑。

這是使用系統(tǒng)方法實現(xiàn)大頭針的拖拽呻逆,其實也可以使用1中拖拽MKOverlayView的方法,在大頭針的位置放一個透明的子視圖菩帝,然后拖動這個子視圖的同時咖城,移除舊的大頭針,再在相應(yīng)位置添加新的大頭針即可呼奢。
只不過這就沒有大頭針升起/落下的動畫了宜雀,當(dāng)然,也不用長按大頭針才能拖動握础,你可以自定義辐董。


3. 隨地圖的縮放而縮放的焦點框功能實現(xiàn)

由于系統(tǒng)沒有提供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就可以了禀综。
    當(dāng)然简烘,最后的計算賦值都在縮放結(jié)束后的函數(shù)中進行:

//當(dāng)拖拽苔严,放大,縮小孤澎,雙擊手勢結(jié)束時調(diào)用
- (void)mapView:(MKMapView *)mapView regionDidChangeAnimated:(BOOL)animated

補充:

前幾天對地圖這邊做優(yōu)化届氢,發(fā)現(xiàn)方案三還可以有另一種做法:
可以通過給mapview對象添加:
UIPanGestureRecognizer,UITapGestureRecognizer覆旭,UIPinchGestureRecognizer
三種手勢來監(jiān)聽對地圖的拖動退子,點擊,縮放的事件型将,既然監(jiān)聽到了這些事件絮供,那么后面的事情就好辦了。

當(dāng)然茶敏,不要忘了在代碼中實現(xiàn)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;
}

這個方法的意思是:
當(dāng)一個手勢被另外一個手勢堵塞后,就會調(diào)用這個回調(diào)缚俏,默認是返回NO的惊搏,
如果返回YES的話,才會允許多個手勢共存忧换。

以上補充已在demo中添加恬惯。


Demo下載鏈接:CamouflageLocationDemo

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市亚茬,隨后出現(xiàn)的幾起案子酪耳,更是在濱河造成了極大的恐慌,老刑警劉巖刹缝,帶你破解...
    沈念sama閱讀 216,919評論 6 502
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件碗暗,死亡現(xiàn)場離奇詭異,居然都是意外死亡梢夯,警方通過查閱死者的電腦和手機言疗,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,567評論 3 392
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來颂砸,“玉大人噪奄,你說我怎么就攤上這事∪伺遥” “怎么了勤篮?”我有些...
    開封第一講書人閱讀 163,316評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長色罚。 經(jīng)常有香客問我碰缔,道長,這世上最難降的妖魔是什么戳护? 我笑而不...
    開封第一講書人閱讀 58,294評論 1 292
  • 正文 為了忘掉前任手负,我火速辦了婚禮涤垫,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘竟终。我一直安慰自己蝠猬,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 67,318評論 6 390
  • 文/花漫 我一把揭開白布统捶。 她就那樣靜靜地躺著榆芦,像睡著了一般。 火紅的嫁衣襯著肌膚如雪喘鸟。 梳的紋絲不亂的頭發(fā)上匆绣,一...
    開封第一講書人閱讀 51,245評論 1 299
  • 那天,我揣著相機與錄音什黑,去河邊找鬼崎淳。 笑死,一個胖子當(dāng)著我的面吹牛愕把,可吹牛的內(nèi)容都是我干的拣凹。 我是一名探鬼主播,決...
    沈念sama閱讀 40,120評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼恨豁,長吁一口氣:“原來是場噩夢啊……” “哼嚣镜!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起橘蜜,我...
    開封第一講書人閱讀 38,964評論 0 275
  • 序言:老撾萬榮一對情侶失蹤菊匿,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后计福,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體跌捆,經(jīng)...
    沈念sama閱讀 45,376評論 1 313
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,592評論 2 333
  • 正文 我和宋清朗相戀三年象颖,在試婚紗的時候發(fā)現(xiàn)自己被綠了疹蛉。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,764評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡力麸,死狀恐怖可款,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情克蚂,我是刑警寧澤闺鲸,帶...
    沈念sama閱讀 35,460評論 5 344
  • 正文 年R本政府宣布,位于F島的核電站埃叭,受9級特大地震影響摸恍,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,070評論 3 327
  • 文/蒙蒙 一立镶、第九天 我趴在偏房一處隱蔽的房頂上張望壁袄。 院中可真熱鬧,春花似錦媚媒、人聲如沸嗜逻。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,697評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽栈顷。三九已至,卻和暖如春嵌巷,著一層夾襖步出監(jiān)牢的瞬間萄凤,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,846評論 1 269
  • 我被黑心中介騙來泰國打工搪哪, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留靡努,地道東北人。 一個月前我還...
    沈念sama閱讀 47,819評論 2 370
  • 正文 我出身青樓晓折,卻偏偏與公主長得像惑朦,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子已维,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,665評論 2 354

推薦閱讀更多精彩內(nèi)容