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