引言

1.1「騰訊位置服務(wù)」是什么？

立足生態(tài)，連接未來

騰訊位置服務(wù)平臺(tái)依托龐大的數(shù)據(jù)生態(tài)，以定位、地圖展示、地點(diǎn)搜索、路線規(guī)劃、導(dǎo)航、室內(nèi)圖、海外圖等位置服務(wù)能力和LBS大數(shù)據(jù)能力為基礎(chǔ)，面向開發(fā)者提供方便、易用、高效的LBS服務(wù)產(chǎn)品。當(dāng)前騰訊位置服務(wù)數(shù)據(jù)能力已覆蓋10億人的位置行為數(shù)據(jù)、日均超過600億次的定位調(diào)用、每日支持1億次位置檢索。

1.2「騰訊位置服務(wù)」可應(yīng)用的場(chǎng)景？

隨著功能的日益完善，騰訊位置服務(wù)可適用的場(chǎng)景也越來越多，如物流業(yè)務(wù)、智能出行、o2o業(yè)務(wù)、共享單車、運(yùn)動(dòng)健康、LBS游戲服務(wù)等行業(yè)均可見騰訊位置服務(wù)的身影。筆者也將通過此文展示下騰訊位置服務(wù)在智能出行行業(yè)的應(yīng)用與實(shí)踐。

需求背景

2.1 「乘車二維碼」微信小程序

自從2017年微信上線小程序以來，小程序已經(jīng)迅速成長為一個(gè)巨大的生態(tài)，吸引各行各業(yè)的開發(fā)者或服務(wù)商參與其中。小程序與線下場(chǎng)景的結(jié)合也日益緊密，其中，乘車二維碼微信小程序無疑讓人們的出行服務(wù)變的更加簡(jiǎn)單、快捷。先乘車，后扣費(fèi)，無論手機(jī)是否聯(lián)網(wǎng)，是否有信號(hào)，都可以很順暢的進(jìn)行乘車。

2.2 完善「乘車二維碼」微信小程序

有了最基本的「乘車二維碼」功能對(duì)用戶體驗(yàn)來說，還是遠(yuǎn)遠(yuǎn)不夠的，為此，從用戶體驗(yàn)的角度出發(fā)，我們逐漸新增了一些實(shí)用的功能，比如查詢附近的公交信息、用戶路線規(guī)劃等。也正因?yàn)樾略隽诉@些實(shí)用性的功能，我們發(fā)現(xiàn)「乘車二維碼」微信小程序在數(shù)據(jù)表現(xiàn)(如日活、留存、使用時(shí)長)方面更加出色了，「騰訊位置服務(wù)」也成為我們「乘車二維碼」微信小程序內(nèi)不可或缺的角色。

接下來，筆者將通過公交地圖、路線規(guī)劃兩個(gè)功能點(diǎn)更加詳細(xì)的介紹「騰訊位置服務(wù)」中的微信小程序 JavaScript SDK、微信小程序插件。

公交地圖

3.1 效果預(yù)覽

3.2 技術(shù)點(diǎn)分析

在上面的效果預(yù)覽圖中，我們不難發(fā)現(xiàn)，實(shí)現(xiàn)公交地圖功能主要包含以下技術(shù)要點(diǎn)：

• 獲取用戶當(dāng)前位置信息

• 通過坐標(biāo)點(diǎn)獲取附近公交信息

• 地圖展示、標(biāo)注

3.3 技術(shù)點(diǎn)實(shí)現(xiàn)

3.3.1 獲取用戶當(dāng)前位置信息

我們可以通過微信小程序官方提供的api：wx.getLocation，來獲取用戶的當(dāng)前位置坐標(biāo)點(diǎn)信息：

wx.getLocation({
type: 'gcj02',
success (res) {
const latitude = res.latitude
const longitude = res.longitude
}
})

這里我們將 type 指定為 gcj02 獲取到的坐標(biāo)點(diǎn)信息可在后續(xù)接口中直接使用，相對(duì)應(yīng)的，如果將 type 指定為 wgs84，后續(xù)我們需要進(jìn)一步進(jìn)行坐標(biāo)轉(zhuǎn)換。

還有個(gè)需要注意的是，該接口需要經(jīng)過用戶授權(quán)同意才能調(diào)用，因此我們需要在 app.json 文件中新增相關(guān)配置：

// app.json
"permission": {
"scope.userLocation": {
"desc": "你的位置信息將用于查詢公交信息"
}
}

3.3.2 獲取附近公交信息

附近公交數(shù)據(jù)哪里來？

這里我們便用到了微信小程序原生LBS能力的最佳拍檔-- 微信小程序JavaScript SDK。

騰訊位置服務(wù)為微信小程序提供了基礎(chǔ)的標(biāo)點(diǎn)能力、線和圓的繪制接口等地圖組件和位置展示、地圖選點(diǎn)等地圖API位置服務(wù)能力支持，使得開發(fā)者可以自由地實(shí)現(xiàn)自己的微信小程序產(chǎn)品。在此基礎(chǔ)上，騰訊位置服務(wù)微信小程序JavaScript SDK是專為小程序開發(fā)者提供的LBS數(shù)據(jù)服務(wù)工具包，可以在小程序中調(diào)用騰訊位置服務(wù)的POI檢索、關(guān)鍵詞輸入提示、地址解析、逆地址解析、行政區(qū)劃和距離計(jì)算等數(shù)據(jù)服務(wù)，讓您的小程序更強(qiáng)大！

接下來筆者將展示如何通過微信小程序JavaScript SDK獲取附近公交的信息。

1. 開通「騰訊位置服務(wù)」：在微信小程序后臺(tái)依次選擇開發(fā)->開發(fā)者工具->騰訊位置服務(wù)，然后點(diǎn)擊開通按鈕，按照提示為您的小程序開通「騰訊位置服務(wù)」

2. 申請(qǐng)開發(fā)者密鑰(key)：申請(qǐng)密鑰（https://lbs.qq.com/dev/console/key/manage）

3. 安全域名設(shè)置：在在微信小程序后臺(tái)依次選擇設(shè)置->開發(fā)設(shè)置中設(shè)置request合法域名，添加 https://apis.map.qq.com

4. 下載微信小程序 JavaScript SDK：微信小程序JavaScriptSDK v1.2（http://3gimg.qq.com/lightmap/xcx/jssdk/qqmap-wx-jssdk1.2.zip）

5. 小程序使用：

//index.js
// 引入 JavaScript SDK 核心類
let QQMapWX = require('../../libs/qqmap-wx-jssdk.js');
let qqmapsdk;
Page({
onLoad: function  {
// 實(shí)例化API核心類
qqmapsdk = new QQMapWX({
key: '申請(qǐng)的key'
});
},
onShow: function  {
// 調(diào)用接口
qqmapsdk.search({
keyword: '公交車站',
location: '28.636767,115.855820',
filter: 'category=公交站',
success: function (res) {
console.log(res);
},
fail: function (res) {
console.log(res);
},
complete: function (res) {
console.log(res);
}
});
}
})

返回結(jié)果：

可以看到，我們已經(jīng)拿到了我們想要的公交數(shù)據(jù)，接下來將公交數(shù)據(jù)在地圖上標(biāo)注展示出來。

3.3.3 地圖展示、標(biāo)注

公交信息的展示使用到了「騰訊位置服務(wù)」為小程序提供的 map 組件，我們需要將公交信息組裝成 markers 從而繪制到地圖組件上。

關(guān)于地圖組件的具體使用可參考官方文檔：map組件的使用（https://developers.weixin.qq.com/miniprogram/dev/component/map.html）

3.4 小結(jié)

可以看到，我們通過微信小程序JavaScript SDK可以很輕松的獲取到附近的公交信息。當(dāng)然，微信小程序JavaScript SDK的能力也遠(yuǎn)遠(yuǎn)不僅于此，它還提供很多實(shí)用性的功能滿足多種使用場(chǎng)景：

詳細(xì)使用可參考官方文檔：微信小程序JavaScript SDK 使用方法（https://lbs.qq.com/qqmap_wx_jssdk/qqmapwx.html）

需要注意的是，每個(gè)key的每個(gè)服務(wù)接口的調(diào)用量都有日調(diào)用量：1萬次/Key、并發(fā)數(shù)：5次/key/秒的限制，如若您的微信小程序使用量超出這個(gè)限制，可通過控制臺(tái)->配額申請(qǐng)（https://lbs.qq.com/dev/console/quota/applyList）中免費(fèi)申請(qǐng)你需要的配額。

路線規(guī)劃

如果說，「乘車二維碼」微信小程序讓人們的出行變得更加簡(jiǎn)單、快捷。

那么，路線規(guī)劃插件則為人們?cè)趺闯鲂刑峁┝俗顑?yōu)解。

4.1 效果預(yù)覽

4.2 路線規(guī)劃插件

騰訊位置服務(wù)路線規(guī)劃插件 提供路線規(guī)劃等功能，根據(jù)起終點(diǎn)，多種出行方式智能規(guī)劃最佳出行路線及詳情。開發(fā)者可以將路線規(guī)劃插件嵌入到自建小程序的頁面里，實(shí)現(xiàn)路線規(guī)劃功能。

可以看到，通過使用路線規(guī)劃插件，我們可以很方便的在我們「乘車二維碼」微信小程序內(nèi)完成路線規(guī)劃功能，接入步驟也較為簡(jiǎn)單，主要分為以下幾步：

插件申請(qǐng)接入：

在微信小程序后臺(tái)管理平臺(tái)中，依次選擇設(shè)置->第三方服務(wù)->插件管理里點(diǎn)擊添加插件，搜索騰訊位置服務(wù)路線規(guī)劃申請(qǐng)，審核通過后，小程序開發(fā)者可在小程序內(nèi)使用該插件。

引入插件包：

// app.json
"plugins": {
"routePlan": {
"version": "1.0.5",
"provider": "wx50b5593e81dd937a"
}
}

設(shè)置定位授權(quán):

// app.json
"permission": {
"scope.userLocation": {
"desc": "你的位置信息將用于小程序定位"
}
}

使用插件：

let key = '申請(qǐng)的key'; //使用在騰訊位置服務(wù)申請(qǐng)的key
let referer = ''; //調(diào)用插件的app的名稱
let endPoint = JSON.stringify({ //終點(diǎn)
'name': '八一廣場(chǎng)',
'latitude': 28.673400,
'longitude': 115.904500
});
wx.navigateTo({
url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint
});

在集成路線規(guī)劃插件后，進(jìn)一步豐富了我們「乘車二維碼」微信小程序的使用場(chǎng)景，現(xiàn)在，用戶可以在不使用地圖類App的情況下進(jìn)行最優(yōu)路線規(guī)劃，躲避擁堵，方便又快捷。

4.3 小結(jié)

「騰訊位置服務(wù)」提供的微信小程序插件，可以說讓微信小程序一步擁有地圖功能，大大的減少了我們開發(fā)的工作量、提升用戶體驗(yàn)、增加了小程序的使用場(chǎng)景。

目前，「騰訊位置服務(wù)」已經(jīng)為我們提供了三款實(shí)用性插件：

• 路線規(guī)劃：根據(jù)起點(diǎn)、終點(diǎn)，智能規(guī)劃最佳出行路線，并支持多種出行方式。

• 地鐵圖：支持全國所有城市地鐵線路靜態(tài)展示、信息查詢、線路檢索及規(guī)劃等功能。

• 地圖選點(diǎn)：快速、準(zhǔn)確地選擇并確認(rèn)自己的當(dāng)前位置，并將相關(guān)位置信息回傳給開發(fā)者。

具體可查看官方文檔：微信小程序插件（https://lbs.qq.com/miniprogram_plugin/index.html）。

相信后續(xù)也會(huì)為我們提供更多功能的插件。

結(jié)語

我們?cè)谕晟啤赋塑嚩S碼」微信小程序的道路上從未停止過腳步，給用戶提供完美的出行體驗(yàn)是我們的終極目標(biāo)。我們也不會(huì)停止在「騰訊位置服務(wù)」上的探索，目前所使用到的能力也僅僅是冰山一角，后續(xù)我們還會(huì)繼續(xù)嘗試「騰訊位置服務(wù)」提供的個(gè)性化地圖、地鐵圖等能力，力爭(zhēng)給用戶提供最完美的出行體驗(yàn)。