前言

目前騰訊位置服務(wù)提供路線規(guī)劃、地圖選點(diǎn)、地鐵圖、城市選擇器插件四款插件產(chǎn)品，本篇博客主要針對(duì)地圖選點(diǎn)功能進(jìn)行實(shí)現(xiàn)。

開通騰訊位置服務(wù)

1、進(jìn)入微信公眾平臺(tái)

2、登錄進(jìn)入小程序后臺(tái)，選擇 “開發(fā) - 開發(fā)工具 - 騰訊位置服務(wù)”

image.png

3、點(diǎn)擊 “開通”，進(jìn)入授權(quán)掃碼界面

image.png

4、使用微信掃碼進(jìn)行授權(quán)

image.png

5、綁定開發(fā)者賬號(hào)

image.png

接入插件

1、在小程序后臺(tái)，選擇 “設(shè)置 - 第三方設(shè)置 - 插件管理”，點(diǎn)擊 “添加插件”

image.png

2、搜索 “騰訊位置服務(wù)地圖選點(diǎn)” 進(jìn)行添加

image.png

開發(fā)者密鑰配置

1、申請(qǐng)開發(fā)者密鑰

2、設(shè)置KEY的 “啟用產(chǎn)品”

a、勾選微信小程序，設(shè)置授權(quán) APP ID

image.png

授權(quán) APP ID 可以通過(guò) “設(shè)置 - 基本設(shè)置” 的賬號(hào)信息進(jìn)行查看

image.png

b、勾選 “WebService API”

image.png

小程序插件需要使用WebService API的部分服務(wù)，所以需要給使用該功能的KEY配置相應(yīng)權(quán)限。

如果填寫了域名白名單，需要把servicewechat.com域名添加進(jìn)域名白名單中，否則小程序下將無(wú)法正常使用WebServiceAPI服務(wù)。

插件的使用

1、引入插件

地圖選點(diǎn)appId： wx76a9a06e5b4e693e

// app.json
{
    "plugins": {
        "chooseLocation": {
        "version": "1.0.5",
        "provider": "wx76a9a06e5b4e693e"
        }
    }
} 

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

地圖選點(diǎn)插件需要小程序提供定位授權(quán)才能夠正常使用定位功能

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

3、代碼實(shí)現(xiàn)

a、js代碼

"use strict";
const chooseLocation = requirePlugin('chooseLocation');
Page({
    data: {
        address: "",
        locationName: ""
    },
    onShow: function () {
        // 從地圖選點(diǎn)插件返回后，在頁(yè)面的onShow生命周期函數(shù)中能夠調(diào)用插件接口，取得選點(diǎn)結(jié)果對(duì)象
        // 如果點(diǎn)擊確認(rèn)選點(diǎn)按鈕，則返回選點(diǎn)結(jié)果對(duì)象，否則返回null
        const location = chooseLocation.getLocation();
        if(location){
            this.setData({
                address: location.address?location.address : "",
                locationName: location.name?location.name : ""
            });
        }
    },
    //顯示地圖
    showMap() {
        //使用在騰訊位置服務(wù)申請(qǐng)的key（必填）
        const key = ""; 
        //調(diào)用插件的app的名稱（必填）
        const referer = ""; 
        wx.navigateTo({
            url: 'plugin://chooseLocation/index?key=' + key + '&referer=' + referer
        });
    }
});

plugin://chooseLocation/index 接口參數(shù)說(shuō)明：

image.png

b、wxml代碼

<!--index.wxml-->
<view class="container">
  <button bindtap="showMap">選擇位置</button>
  <view style="margin-top:10px">地址：{{address?address:"暫無(wú)"}}</view>
  <view style="margin-top:10px">名稱：{{locationName?locationName:"暫無(wú)"}}</view>
</view>

4、效果實(shí)現(xiàn)

20210115205321358.gif

作者：盛夏溫暖流年

鏈接：https://blog.csdn.net/j1231230/article/details/112352787

來(lái)源：CSDN

著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。