如圖標(biāo)黃處為地圖能力所處的一個(gè)位置，舉個(gè)例子，比如調(diào)用定位能力獲取用戶當(dāng)前位置的一個(gè)流程：

首先調(diào)用JS API wx.getLocation接口 -> 調(diào)用地圖sdk獲取位置接口 -> 地圖sdk成功后回調(diào) -> JS API成功后回調(diào)。

回歸正題，了解了整體的調(diào)用流程，下面我們對(duì)具體的地圖能力進(jìn)行詳細(xì)講解。

小程序位置服務(wù)能力

目前微信小程序下，提供了豐富的組件和API供開發(fā)者使用，其中原生提供的位置服務(wù)已經(jīng)包含核心位置能力API及地圖組件。

位置能力API

不僅包括基礎(chǔ)的定位API，也提供了位置展示和位置選擇的調(diào)用API，開發(fā)者只需要一個(gè)API就能直接調(diào)起原生能力，通過(guò)極低的成本就能完成相應(yīng)的開發(fā)。

wx.getLocation(OBJECT)

獲取當(dāng)前的地理位置、速度。

場(chǎng)景

幾乎任何一個(gè)應(yīng)用都要獲取用戶當(dāng)前的位置，大家應(yīng)該經(jīng)常會(huì)看到一個(gè)提示xxx要獲取你當(dāng)前的位置 允許 不允許，這就是獲取當(dāng)前位置的安全驗(yàn)證提示。知道了我的位置就可以實(shí)現(xiàn)周邊的飯店、學(xué)校、廁所、出租車等等一系列周邊相關(guān)的場(chǎng)景。

示例代碼：

注意?type參數(shù)，默認(rèn)為 wgs84 返回 gps 坐標(biāo)，gcj02 返回可用于wx.openLocation打開地圖的騰訊坐標(biāo)，默認(rèn)參數(shù)wgs84是原生經(jīng)緯度，建議參數(shù)寫成gcj02。

wx.chooseLocation(OBJECT)

打開地圖選擇位置

場(chǎng)景

選擇一個(gè)位置可以快速填寫購(gòu)物時(shí)的配送地址，選擇另外一個(gè)位置去訂外賣，一般在回家的路上提前訂好，到家就正好可以吃了。出去旅游前我們要選擇景點(diǎn)周邊的住宿等等都離不開要選擇另為一個(gè)位置的場(chǎng)景。

效果

示例代碼：

注意?在選點(diǎn)時(shí)如果是通過(guò)拖動(dòng)地圖并且選中的是默認(rèn)的第一條，則很有可能success回調(diào)中name字段為空，因?yàn)檫@樣標(biāo)的點(diǎn)不一定能對(duì)應(yīng)到POI，列表中的非第一條內(nèi)容則為以當(dāng)前點(diǎn)的經(jīng)緯度檢索周邊的poi，所以除第一條其它都是有名稱的，大家在使用的時(shí)候需要注意一下。

POI（Point of Interest，興趣點(diǎn)）。在地圖表達(dá)中，一個(gè)POI可代表一棟大廈、一家商鋪、一處景點(diǎn)等等

wx.openLocation(OBJECT)

使用微信內(nèi)置地圖查看位置

場(chǎng)景

展示一個(gè)位置的場(chǎng)景大家應(yīng)該經(jīng)常見(jiàn)到，比如：美團(tuán)、點(diǎn)評(píng)里的店鋪詳情頁(yè)面都有個(gè)店鋪地址，點(diǎn)擊進(jìn)入會(huì)看到地圖上標(biāo)記了一個(gè)位置點(diǎn)。效果類似下圖。

效果

代碼示例

map組件

組件是小程序?yàn)殚_發(fā)者提供的基礎(chǔ)組件，示例:<map></map>, map組件包含以下四個(gè)功能性屬性markers、polyline、circles、controls。下邊對(duì)以上四個(gè)屬性分別介紹。接口詳細(xì)說(shuō)明見(jiàn)小程序Map組件文檔

map組件-markers

在地圖上顯示位置點(diǎn)

場(chǎng)景

相對(duì)上面的接口wx.openLocation(OBJECT)，此接口可以實(shí)現(xiàn)一個(gè)自定義的位置展示，而且也可以實(shí)現(xiàn)多個(gè)位置點(diǎn)同時(shí)顯示到地圖上。比如：周邊的XXX在通過(guò)地圖的形式展示。這里只說(shuō)一個(gè)位置點(diǎn)，多點(diǎn)只是markers參數(shù)傳入多個(gè)點(diǎn)。后面示例會(huì)涉及到，這里就不贅述了。

效果

代碼示例

注意?map的longitude、latitude中心點(diǎn)坐標(biāo)要與markers的數(shù)據(jù)一致這樣位置點(diǎn)才能標(biāo)記到地圖視野的中心。

map組件-polyline

畫線，指定一系列坐標(biāo)點(diǎn)，從數(shù)組第一項(xiàng)連線至最后一項(xiàng)。

場(chǎng)景

軌跡繪制，運(yùn)動(dòng)軌跡分享，經(jīng)驗(yàn)路線分享等相關(guān)路線的功能。

效果

代碼示例

注意?include-points屬性是將所有的點(diǎn)展示到可視區(qū)域內(nèi)，但是如果不設(shè)置中心點(diǎn)latitude、longitude會(huì)有不能展現(xiàn)到視野內(nèi)的問(wèn)題，開發(fā)時(shí)需要注意，include-points屬性可以通過(guò)計(jì)算所有點(diǎn)的最大矩形左下經(jīng)緯度&右上經(jīng)緯度來(lái)設(shè)置，這樣可以減小setData的數(shù)據(jù)。因?yàn)樾〕绦騭etData的數(shù)據(jù)傳輸有1M的限制。

map組件-circles

場(chǎng)景

周邊某范圍內(nèi)XXX的展示，外賣配送范圍的展示，比如：周邊1000米有沒(méi)有廁所，這家飯店送餐的區(qū)域等。

效果

代碼示例

map組件-controls

場(chǎng)景

主要實(shí)現(xiàn)地圖內(nèi)的交互場(chǎng)景，下面以回到當(dāng)前位置為例，點(diǎn)擊地圖右下方的控件執(zhí)行回到當(dāng)前的位置。當(dāng)然也可以換成酒店、餐飲、娛樂(lè)等。

效果

示例代碼

注意?在設(shè)置控件位置時(shí)要用wx.getSystemInfoSync()接口返回的邏輯寬windowWidth高windowHeight進(jìn)行定位。控件點(diǎn)擊處理函數(shù)中需要通過(guò)e.controlId對(duì)應(yīng)控件設(shè)置的id進(jìn)行區(qū)分處理。

wx.createMapContext(mapId)

創(chuàng)建并返回 map 上下文 mapContext 對(duì)象，主要包括方法有g(shù)etCenterLocation、moveToLocation，控件示例已經(jīng)涉及到就舉例說(shuō)明了，請(qǐng)參見(jiàn)小程序wx.createMapContext(mapId) API文檔

小程序地圖應(yīng)用示例

結(jié)合上述地圖能力，分享一個(gè)找?guī)睦印?/p>

需求

實(shí)現(xiàn)一個(gè)找?guī)墓δ?，找周?000米內(nèi)的廁所。并把廁所的位置點(diǎn)標(biāo)到地圖上。點(diǎn)擊位置點(diǎn)對(duì)應(yīng)icon放大并且在地圖下方顯示相應(yīng)的名稱、地址信息。

實(shí)現(xiàn)

主要分三個(gè)步驟：

1. 獲取當(dāng)前位置
2. 通過(guò)檢索服務(wù)搜索當(dāng)前位置周邊的廁所
3. 在地圖視野內(nèi)標(biāo)記所有位置點(diǎn)以及位置的交互

效果

代碼示例

獲取當(dāng)前位置

通過(guò)檢索服務(wù)WebService API搜索當(dāng)前位置周邊1000的廁所

在地圖視野內(nèi)標(biāo)記所有位置點(diǎn)以及位置點(diǎn)的點(diǎn)擊交互

結(jié)語(yǔ)

整體來(lái)看，目前小程序下的位置服務(wù)能力已經(jīng)能夠覆蓋LBS應(yīng)用的大部分場(chǎng)景，隨著小程序生態(tài)的逐步完善，相信有更多的LBS場(chǎng)景會(huì)被挖掘，騰訊位置服務(wù)會(huì)聯(lián)合小程序持續(xù)打造更加完善的LBS能力。

王珂玥

存儲(chǔ)在線（DOSTOR）主編