文章目錄
- 一. 騰訊位置服務插件簡介
- 1. 完整的地圖能力
- 2. 地圖插件的優勢
- 二. 開通騰訊位置服務
- 三、接入插件
- 四、 開發者密鑰配置
- 五、插件的使用
一. 騰訊位置服務插件簡介
1. 完整的地圖能力
騰訊位置服務基于微信提供的小程式插件能力，專注于（圍繞）地圖功能，打造一系列小程式插件，可以幫助開發者簡單、快速的建構小程式，是實作地圖功能的最佳夥伴。
目前騰訊位置服務提供 路線規劃、地圖選點、地鐵圖 三款插件産品，本篇部落客要針對地圖選點功能進行實作。
路線規劃：提供地圖路線規劃功能。根據起終點，智能規劃駕車、公交、步行出行路線及詳情。開發者可以将路線規劃插件嵌入到自建小程式的頁面裡，實作路線規劃功能。
地鐵圖：支援全國重點城市地鐵線路靜态展示、資訊查詢、線路檢索及規劃功能。
地圖選點：快速、準确地選擇并确認自己的目前位置，并将相關位置資訊回傳給開發者。同時還提供位置檢索、關鍵詞分類等輔助功能。
2. 地圖插件的優勢
豐富的插件市場：豐富的地圖插件産品，為開發者提供更多的選擇，滿足不同的應用場景。
節約開發成本：插件本身具有強大的靈活性，無需開發者投入專業的人力研發，就可以擁有地圖能力，縮減企業研發成本。
專業的行業方案：騰訊位置服務專注于地圖能力，多年服務政企、美團、京東、滴滴等大客戶的經驗，鍛造了更加專業的産品并提供更優秀的行業解決方案。
二. 開通騰訊位置服務
1.進入微信公衆平台
https://mp.weixin.qq.com/
2.登入進入小程式背景，選擇 “開發 - 開發工具 - 騰訊位置服務”
3.點選 “開通”，進入授權掃碼界面
4.使用微信掃碼進行授權
5.綁定開發者賬号
三、接入插件
1.在小程式背景，選擇 “設定 - 第三方設定 - 插件管理”，點選 “添加插件”
2.搜尋 “騰訊位置服務地圖選點” 進行添加
四、 開發者密鑰配置
- 申請開發者密鑰
進入騰訊位置服務平台：
https://lbs.qq.com?lbs_invite=Y9PRFLY
注冊或登入後，申請開發者密鑰：
PS: 成功申請密鑰後才可以調用騰訊位置服務官網提供的相關服務；
- 設定KEY的 “啟用産品”
a. 勾選微信小程式，設定授權 APP ID
授權 APP ID 可以通過 “設定 - 基本設定” 的賬号資訊進行檢視
b. 勾選 “WebService API”
小程式插件需要使用WebService API的部分服務，是以需要給使用該功能的KEY配置相應權限。
如果填寫了域名白名單，需要把servicewechat.com 域名添加進域名白名單中，否則小程式下将無法正常使用WebServiceAPI服務。
五、插件的使用
1.引入插件
地圖選點appId： wx76a9a06e5b4e693e
// app.json
{
"plugins": {
"chooseLocation": {
"version": "1.0.5",
"provider": "wx76a9a06e5b4e693e"
}
}
} 2.設定定位授權
地圖選點插件需要小程式提供定位授權才能夠正常使用定位功能
// app.json
{
"permission": {
"scope.userLocation": {
"desc": "你的位置資訊将用于小程式定位"
}
}
} - 代碼實作
a. js代碼
"use strict";
const chooseLocation = requirePlugin('chooseLocation');
Page({
data: {
address: "",
locationName: ""
},
onShow: function () {
// 從地圖選點插件傳回後，在頁面的onShow生命周期函數中能夠調用插件接口，取得選點結果對象
// 如果點選确認選點按鈕，則傳回選點結果對象，否則傳回null
const location = chooseLocation.getLocation();
if(location){
this.setData({
address: location.address?location.address : "",
locationName: location.name?location.name : ""
});
}
},
//顯示地圖
showMap() {
//使用在騰訊位置服務申請的key（必填）
const key = "";
//調用插件的app的名稱（必填）
const referer = "";
wx.navigateTo({
url: 'plugin://chooseLocation/index?key=' + key + '&referer=' + referer
});
}
}); plugin://chooseLocation/index 接口參數說明：
<!--index.wxml-->
<view class="container">
<button bindtap="showMap">選擇位置</button>
<view style="margin-top:10px">位址：{{address?address:"暫無"}}</view>
<view style="margin-top:10px">名稱：{{locationName?locationName:"暫無"}}</view>
</view> - 效果實作