前言

目前騰訊位置服務(wù)提供路線規(guī)劃韩玩、地圖選點佑吝、地鐵圖骨饿、城市選擇器插件四款插件產(chǎn)品围段，本篇博客主要針對地圖選點功能進行實現(xiàn)顾翼。

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

1、進入微信公眾平臺

2奈泪、登錄進入小程序后臺适贸，選擇 “開發(fā) - 開發(fā)工具 - 騰訊位置服務(wù)”

image.png

3灸芳、點擊 “開通”，進入授權(quán)掃碼界面

image.png

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

image.png

5烙样、綁定開發(fā)者賬號

image.png

接入插件

1、在小程序后臺蕊肥，選擇 “設(shè)置 - 第三方設(shè)置 - 插件管理”谒获，點擊 “添加插件”

image.png

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

image.png

開發(fā)者密鑰配置

1壁却、申請開發(fā)者密鑰

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

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

image.png

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

image.png

b赔硫、勾選 “WebService API”

image.png

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

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

插件的使用

1惊完、引入插件

地圖選點appId： wx76a9a06e5b4e693e

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

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

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

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

3处硬、代碼實現(xiàn)

a、js代碼

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

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

image.png

b疮方、wxml代碼

<!--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>

4、效果實現(xiàn)

作者：盛夏溫暖流年

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

來源：CSDN

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