騰訊位置服務如何賦能微信小程序?看這文就夠了!

一、引言

1.1「騰訊位置服務」是什麼？

立足生態，連接未來

騰訊位置服務平臺依託龐大的數據生態，以定位、地圖展示、地點搜索、路線規劃、導航、室內圖、海外圖等位置服務能力和LBS大數據能力為基礎，面向開發者提供方便、易用、高效的LBS服務產品。當前騰訊位置服務數據能力已覆蓋10億人的位置行為數據、日均超過600億次的定位調用、每日支持1億次位置檢索。

1.2「騰訊位置服務」可應用的場景？

隨著功能的日益完善，騰訊位置服務可適用的場景也越來越多，如物流業務、智能出行、o2o業務、共享單車、運動健康、LBS遊戲服務等行業均可見騰訊位置服務的身影。筆者也將通過此文展示下騰訊位置服務在智能出行行業的應用與實踐。

二、需求背景

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

自從2017年微信上線小程序以來，小程序已經迅速成長為一個巨大的生態，吸引各行各業的開發者或服務商參與其中。小程序與線下場景的結合也日益緊密，其中，乘車二維碼微信小程序無疑讓人們的出行服務變的更加簡單、快捷。先乘車，後扣費，無論手機是否聯網，是否有信號，都可以很順暢的進行乘車。

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

有了最基本的「乘車二維碼」功能對用戶體驗來說，還是遠遠不夠的，為此，從用戶體驗的角度出發，我們逐漸新增了一些實用的功能，比如查詢附近的公交信息、用戶路線規劃等。也正因為新增了這些實用性的功能，我們發現「乘車二維碼」微信小程序在數據表現(如日活、留存、使用時長)方面更加出色了，「騰訊位置服務」也成為我們「乘車二維碼」微信小程序內不可或缺的角色。

接下來，筆者將通過公交地圖、路線規劃兩個功能點更加詳細的介紹「騰訊位置服務」中的微信小程序 JavaScript SDK、微信小程序插件。

三、公交地圖

3.1 效果預覽

3.2 技術點分析

在上面的效果預覽圖中，我們不難發現，實現公交地圖功能主要包含以下技術要點：

• 獲取用戶當前位置信息
• 通過坐標點獲取附近公交信息
• 地圖展示、標註

3.3 技術點實現

3.3.1 獲取用戶當前位置信息

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

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

這裡我們將 type 指定為 gcj02 獲取到的坐標點信息可在後續接口中直接使用，相對應的，如果將 type 指定為 wgs84，後續我們需要進一步進行坐標轉換。

還有個需要注意的是，該接口需要經過用戶授權同意才能調用，因此我們需要在 app.json 文件中新增相關配置：

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

3.3.2 獲取附近公交信息

附近公交數據哪裡來？

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

騰訊位置服務為微信小程序提供了基礎的標點能力、線和圓的繪製接口等地圖組件和位置展示、地圖選點等地圖API位置服務能力支持，使得開發者可以自由地實現自己的微信小程序產品。 在此基礎上，騰訊位置服務微信小程序JavaScript SDK是專為小程序開發者提供的LBS數據服務工具包，可以在小程序中調用騰訊位置服務的POI檢索、關鍵詞輸入提示、地址解析、逆地址解析、行政區劃和距離計算等數據服務，讓您的小程序更強大！

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

1. 開通「騰訊位置服務」：在微信小程序後臺依次選擇開發->開發者工具->騰訊位置服務，然後點擊開通按鈕，按照提示為您的小程序開通「騰訊位置服務」

   

2. 申請開發者密鑰(key)：申請密鑰

3. 安全域名設置：在在微信小程序後臺依次選擇設置->開發設置中設置request合法域名，添加 https://apis.map.qq.com

4. 下載微信小程序 JavaScript SDK：微信小程序JavaScriptSDK v1.2

5. 小程序使用：

   let QQMapWX = require('../../libs/qqmap-wx-jssdk.js'); let qqmapsdk; Page({ onLoad: function () { qqmapsdk = new QQMapWX({ key: '申請的key' }); }, onShow: function () { 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); } }); } })

返回結果：

可以看到，我們已經拿到了我們想要的公交數據，接下來將公交數據在地圖上標註展示出來。

3.3.3 地圖展示、標註

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

關於地圖組件的具體使用可參考官方文檔：map組件的使用

3.4 小結

可以看到，我們通過微信小程序JavaScript SDK可以很輕鬆的獲取到附近的公交信息。當然，微信小程序JavaScript SDK的能力也遠遠不僅於此，它還提供很多實用性的功能滿足多種使用場景：

詳細使用可參考官方文檔：微信小程序JavaScript SDK 使用方法

需要注意的是，每個key的每個服務接口的調用量都有日調用量：1萬次/Key、並發數：5次/key/秒的限制，如若您的微信小程序使用量超出這個限制，可通過控制臺->配額申請中免費申請你需要的配額。

四、路線規劃

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

那麼，路線規劃插件則為人們怎麼出行提供了最優解。

4.1 效果預覽

4.2 路線規劃插件

騰訊位置服務路線規劃插件 提供路線規劃等功能，根據起終點，多種出行方式智能規劃最佳出行路線及詳情。開發者可以將路線規劃插件嵌入到自建小程序的頁面裡，實現路線規劃功能。

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

1. 插件申請接入：

   在微信小程序後臺管理平臺中，依次選擇設置->第三方服務->插件管理裡點擊添加插件，搜索騰訊位置服務路線規劃申請，審核通過後，小程序開發者可在小程序內使用該插件。

   

2. 引入插件包：

   "plugins": { "routePlan": { "version": "1.0.5", "provider": "wx50b5593e81dd937a" } }

3. 設置定位授權:

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

4. 使用插件：

   let key = '申請的key'; let referer = ''; let endPoint = JSON.stringify({ 'name': '八一廣場', 'latitude': 28.673400, 'longitude': 115.904500 }); wx.navigateTo({ url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint });

在集成路線規劃插件後，進一步豐富了我們「乘車二維碼」微信小程序的使用場景，現在，用戶可以在不使用地圖類App的情況下進行最優路線規劃，躲避擁堵，方便又快捷。

4.3 小結

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

目前，「騰訊位置服務」已經為我們提供了三款實用性插件：

• 路線規劃：根據起點、終點，智能規劃最佳出行路線，並支持多種出行方式。

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

• 地圖選點：快速、準確地選擇並確認自己的當前位置，並將相關位置信息回傳給開發者。

具體可查看官方文檔：微信小程序插件

相信後續也會為我們提供更多功能的插件。

五、結語

我們在完善「乘車二維碼」微信小程序的道路上從未停止過腳步，給用戶提供完美的出行體驗是我們的終極目標。我們也不會停止在「騰訊位置服務」上的探索，目前所使用到的能力也僅僅是冰山一角，後續我們還會繼續嘗試「騰訊位置服務」提供的個性化地圖、地鐵圖等能力，力爭給用戶提供最完美的出行體驗。

也期待著未來在微信小程序端「騰訊位置服務」能提供更多的使用場景，讓出行更簡單！

a