如圖標黃處為地圖能力所處的一個位置,舉個例子,比如調用定位能力獲取用戶當前位置的一個流程:
首先調用JS API wx.getLocation接口 -> 調用地圖sdk獲取位置接口 -> 地圖sdk成功后回調 -> JS API成功后回調。
回歸正題,了解了整體的調用流程,下面我們對具體的地圖能力進行詳細講解。
小程序位置服務能力
目前微信小程序下,提供了豐富的組件和API供開發(fā)者使用,其中原生提供的位置服務已經包含核心位置能力API及地圖組件。
位置能力API
不僅包括基礎的定位API,也提供了位置展示和位置選擇的調用API,開發(fā)者只需要一個API就能直接調起原生能力,通過極低的成本就能完成相應的開發(fā)。
wx.getLocation(OBJECT)
獲取當前的地理位置、速度。
場景
幾乎任何一個應用都要獲取用戶當前的位置,大家應該經常會看到一個提示xxx要獲取你當前的位置 允許 不允許,這就是獲取當前位置的安全驗證提示。知道了我的位置就可以實現(xiàn)周邊的飯店、學校、廁所、出租車等等一系列周邊相關的場景。
示例代碼:
注意?type參數(shù),默認為 wgs84 返回 gps 坐標,gcj02 返回可用于wx.openLocation打開地圖的騰訊坐標,默認參數(shù)wgs84是原生經緯度,建議參數(shù)寫成gcj02。
wx.chooseLocation(OBJECT)
打開地圖選擇位置
場景
選擇一個位置可以快速填寫購物時的配送地址,選擇另外一個位置去訂外賣,一般在回家的路上提前訂好,到家就正好可以吃了。出去旅游前我們要選擇景點周邊的住宿等等都離不開要選擇另為一個位置的場景。
效果
示例代碼:
注意?在選點時如果是通過拖動地圖并且選中的是默認的第一條,則很有可能success回調中name字段為空,因為這樣標的點不一定能對應到POI,列表中的非第一條內容則為以當前點的經緯度檢索周邊的poi,所以除第一條其它都是有名稱的,大家在使用的時候需要注意一下。
POI(Point of Interest,興趣點)。在地圖表達中,一個POI可代表一棟大廈、一家商鋪、一處景點等等
wx.openLocation(OBJECT)
使用微信內置地圖查看位置
場景
展示一個位置的場景大家應該經常見到,比如:美團、點評里的店鋪詳情頁面都有個店鋪地址,點擊進入會看到地圖上標記了一個位置點。效果類似下圖。
效果
代碼示例
map組件
組件是小程序為開發(fā)者提供的基礎組件,示例:<map></map>, map組件包含以下四個功能性屬性markers、polyline、circles、controls。下邊對以上四個屬性分別介紹。接口詳細說明見小程序Map組件文檔
map組件-markers
在地圖上顯示位置點
場景
相對上面的接口wx.openLocation(OBJECT),此接口可以實現(xiàn)一個自定義的位置展示,而且也可以實現(xiàn)多個位置點同時顯示到地圖上。比如:周邊的XXX在通過地圖的形式展示。這里只說一個位置點,多點只是markers參數(shù)傳入多個點。后面示例會涉及到,這里就不贅述了。
效果
代碼示例
注意?map的longitude、latitude中心點坐標要與markers的數(shù)據(jù)一致這樣位置點才能標記到地圖視野的中心。
map組件-polyline
畫線,指定一系列坐標點,從數(shù)組第一項連線至最后一項。
場景
軌跡繪制,運動軌跡分享,經驗路線分享等相關路線的功能。
效果
代碼示例
注意?include-points屬性是將所有的點展示到可視區(qū)域內,但是如果不設置中心點latitude、longitude會有不能展現(xiàn)到視野內的問題,開發(fā)時需要注意,include-points屬性可以通過計算所有點的最大矩形左下經緯度&右上經緯度來設置,這樣可以減小setData的數(shù)據(jù)。因為小程序setData的數(shù)據(jù)傳輸有1M的限制。
map組件-circles
場景
周邊某范圍內XXX的展示,外賣配送范圍的展示,比如:周邊1000米有沒有廁所,這家飯店送餐的區(qū)域等。
效果
代碼示例
map組件-controls
場景
主要實現(xiàn)地圖內的交互場景,下面以回到當前位置為例,點擊地圖右下方的控件執(zhí)行回到當前的位置。當然也可以換成酒店、餐飲、娛樂等。
效果
示例代碼
注意?在設置控件位置時要用wx.getSystemInfoSync()接口返回的邏輯寬windowWidth高windowHeight進行定位??丶c擊處理函數(shù)中需要通過e.controlId對應控件設置的id進行區(qū)分處理。
wx.createMapContext(mapId)
創(chuàng)建并返回 map 上下文 mapContext 對象,主要包括方法有getCenterLocation、moveToLocation,控件示例已經涉及到就舉例說明了,請參見小程序wx.createMapContext(mapId) API文檔
小程序地圖應用示例
結合上述地圖能力,分享一個找?guī)睦印?/p>
需求
實現(xiàn)一個找?guī)墓δ埽抑苓?000米內的廁所。并把廁所的位置點標到地圖上。點擊位置點對應icon放大并且在地圖下方顯示相應的名稱、地址信息。
實現(xiàn)
主要分三個步驟:
效果
代碼示例
獲取當前位置
通過檢索服務WebService API搜索當前位置周邊1000的廁所
在地圖視野內標記所有位置點以及位置點的點擊交互
結語
整體來看,目前小程序下的位置服務能力已經能夠覆蓋LBS應用的大部分場景,隨著小程序生態(tài)的逐步完善,相信有更多的LBS場景會被挖掘,騰訊位置服務會聯(lián)合小程序持續(xù)打造更加完善的LBS能力。