iOS 百度地圖的高級用法

本文主要介紹百度地圖的自定義用法,比如創(chuàng)建地圖、添加標(biāo)注點、添加路徑軌跡等問題不在本文討論范圍,請點擊百度地圖開放平臺。本文屬于本人原創(chuàng),如需轉(zhuǎn)載,請注明出處。如本文有說明錯誤或者不足的地方,還望指出,共同進步。

本文主要講解的內(nèi)容有:

1.添加自定義標(biāo)注

2.添加標(biāo)注點氣泡

3.設(shè)定百度地圖適當(dāng)?shù)娘@示范圍

4.點擊標(biāo)注點氣泡彈出并居中顯示

5.軌跡添加紋理圖片

6.添加標(biāo)注點聚合功能


1.添加自定義的標(biāo)注

需求1?

在項目中,需要顯示的標(biāo)注不只有圖片,有時也會有文字提示,此時就需要自定義標(biāo)注。尋找解決方法:

第一步:進入百度地圖官方API中查找,是否可以添加自定義的view,很遺憾,沒有,只能設(shè)置圖片。

標(biāo)注點添加顯示圖片

第二步:自定義的視圖,通過以下方法轉(zhuǎn)換為image,然后賦值給image。

視圖轉(zhuǎn)為image方法

注意:添加自定義的標(biāo)注點,需要設(shè)置標(biāo)注的中心偏移;不然,在地圖放大縮小時,標(biāo)注點的定點會跟隨移動。

設(shè)置標(biāo)注點偏移

上面的方法是在百度地圖的回調(diào)方法-(BMKAnnotationView*)mapView:(BMKMapView*)mapView viewForAnnotation:(id)annotation中實現(xiàn)。


需求2

當(dāng)在地圖上的標(biāo)注點超過2個時,如何區(qū)分開。此時創(chuàng)建自定義的標(biāo)注點繼承于BMKPointAnnotation,在內(nèi)部添加需要的屬性或者方法,然后在百度地圖標(biāo)注視圖回調(diào)方法中實現(xiàn)相應(yīng)的功能。

繼承BMKPointAnnotation
地圖回調(diào)方法

2.添加標(biāo)注點自定義氣泡

(1)項目中,遇到要點擊標(biāo)注點彈出氣泡視圖,顯示這個標(biāo)注點的詳細信息。需要在添加標(biāo)注點時設(shè)置title的值,自定義氣泡視圖,title值可以隨便賦值。

設(shè)置標(biāo)注點氣泡標(biāo)題

(2)在百度地圖BMKAnnotationView中尋找可以添加氣泡視圖的屬性,找到paopaoView,嗯,命名很別致。

標(biāo)注點氣泡視圖

接下來,自定義需要顯示的氣泡視圖,創(chuàng)建自定義氣泡視圖對象,然后賦值給paopaoView就ok了。

自定義氣泡視圖初始化
氣泡視圖賦值

注意:如果遇到標(biāo)注點是自定義的(比如顯示車輛的圖標(biāo)和車牌號),點擊標(biāo)注點彈出的氣泡顯示位置是以標(biāo)注點x軸的中心對齊,如果需要顯示在其他位置,則需要設(shè)置氣泡的偏移量。

氣泡視圖偏移量

3.設(shè)定百度地圖適當(dāng)?shù)娘@示范圍

下面要講的才是重點,直接上代碼,這里展示的是我自己的思路,如果有不妥或者更好的方法,歡迎指正。

需求是,需要在地圖上添加一組標(biāo)注點,并以合適的縮放比例,將全部的標(biāo)注點全部顯示在地圖可視范圍內(nèi)。通過查找百度地圖的官方API,找到如下方法。

顯示地圖的顯示范圍
百度地圖經(jīng)緯度區(qū)域
百度地圖經(jīng)緯度范圍

實現(xiàn)思路為:遍歷所有標(biāo)注點的經(jīng)緯度值,找出其中最大和最小的經(jīng)度和緯度值。相當(dāng)于在地圖上畫一個矩形,需要確定矩形的起始點和寬高,這里是以經(jīng)緯度來計算。方法如下

計算出顯示范圍
找出最大最小經(jīng)緯度值

好像上面的方法完美解決,拿衣服!如果遇到如下的需求。需要在地圖上顯示車輛的位置,并顯示車輛的運行狀態(tài)和車牌號,由于自定義的標(biāo)注點是以車輛的底部為定點(如下圖車輛顯示定點),右邊的車牌將不會顯示在地圖的可視范圍內(nèi),這是因為,在顯示Region時,以經(jīng)緯度計算,剛好在最邊上的標(biāo)注點將會顯示貼邊顯示。

車輛顯示定點
顯示車輛和車牌

如果可以設(shè)置地圖的上下左右的預(yù)留位置,就可以解決這個問題,接著看官方API,找到可以設(shè)置預(yù)留邊界的方法。如下

顯示地圖范圍

如果使用下面的方法,也可以實現(xiàn)效果,不過,會出現(xiàn),設(shè)置了氣泡的顯示范圍(第四個將會講解),點擊標(biāo)注點顯示氣泡時,氣泡會產(chǎn)生偏移,這個偏移值與屏幕尺寸之間的關(guān)系目前還沒有找到。(不推薦使用)

填充地圖顯示范圍

看到需要傳入一個BMKMapRect,看到注釋,直角地理坐標(biāo),這是什么鬼?然后無奈去百度,解釋的太專業(yè),果斷放棄,還有沒其他的方法?

地圖的直角地理坐標(biāo)

在覆蓋物的基類中找到有這個屬性。思路為添加一段軌跡線,獲取到軌跡線的boundingMapRect,然后賦值。方法為: BMKPolyline*polyline = [BMKPolylinepolylineWithCoordinates:coordscount:count];? 完美解決問題。

覆蓋物基類

4.點擊標(biāo)注點氣泡彈出并居中顯示

最后這個問題,思路與上一個類似,具體的實現(xiàn)方法如下:

點擊標(biāo)注點顯示自定義氣泡時,氣泡不會居中顯示在地圖上,這就尷尬了!繼續(xù)查找官方API??吹较旅娴姆椒?,靈光一現(xiàn),氣泡就是一個視圖,已知氣泡的寬度和高度,需要求出氣泡的起點。

將視圖rect轉(zhuǎn)換為地圖regio
經(jīng)緯度轉(zhuǎn)換為視圖坐標(biāo)
設(shè)置地圖的顯示范圍

已知點擊的標(biāo)志點的經(jīng)緯度值,求出這個點在地圖上的視圖坐標(biāo)點,示意圖如下

已知條件 Map H(地圖視圖的高度)? ?Map W(地圖視圖的寬度)? P(標(biāo)注點的開始位置) bubbleWidth(氣泡的寬度) bubbleHeight(氣泡的高度)

求出? P2(居中顯示的標(biāo)注點)O1(氣泡的開始起點)? O2(氣泡居中顯示的起始點)

第一步:通過百度地圖API求出P的視圖坐標(biāo)

第二步:求出O1起點的坐標(biāo)? O1.x = P.x-bubbleWidth/2;? O1.y = P.x-bubbleHeight;

第三步:通過百度地圖API將氣泡視圖rect轉(zhuǎn)換為BMKCoordinateRegion,然后設(shè)置地圖的顯示范圍。

手繪的示意圖

最后的實現(xiàn)代碼如下

代碼實現(xiàn)

5.軌跡添加紋理圖片

公司的項目中,查詢車輛的歷史軌跡時,需要標(biāo)明車輛的運行方向。之前的做法是添加方向標(biāo)注點,但這樣的效果不是很好,用紋理圖片就完美的解決問題。

添加紋理圖片時,需要注意兩點:一是紋理圖片的方向尖頭必須朝下;二是紋理圖片的尺寸必須為2的n次方冪。

繪制軌跡線的回調(diào)方法

在繪制軌跡線的回調(diào)方法時,需要自定義BMKPolyLineView,重寫glRender方法,具體實現(xiàn)如下:

重寫glRender方法

6.添加標(biāo)注點聚合功能

從百度開放平臺上下載示例demo,里面有開源的聚合算法。將其中的文件拷貝到項目中即可。

demo目錄

進入MapDemo/ClusterDemoViewController中,核心代碼如下:

更新聚合狀態(tài)

如果覺得可以,給個贊,謝謝!

下一篇將會講解google地圖的一些用法。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 內(nèi)容抽屜菜單ListViewWebViewSwitchButton按鈕點贊按鈕進度條TabLayout圖標(biāo)下拉刷新...
    皇小弟閱讀 47,136評論 22 665
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 15,104評論 4 61
  • 還是有懸而未決的事,還是有許多想了又想不知如何是好的事還是不能全力與愛的人恣意前行... 有時候會覺得“一地雞毛”...
    mo清夜無塵閱讀 94評論 0 1
  • 昨天真是奇妙的一天,中午進門時無意識的將鑰匙插在門上,等我有事要出去時又慣性的把保險栓一拉,只聽見清脆的啪的一聲,...
    虞七七閱讀 411評論 2 6
  • 作業(yè):【一階段·片段二】 R· 閱讀原文片段 《商業(yè)模式新生代》 1請寫下你的目標(biāo) 例一:我的目標(biāo)是在工作表現(xiàn)中領(lǐng)...
    mamaissmiling閱讀 230評論 7 1

友情鏈接更多精彩內(nèi)容