小白入門必看 ‘’微信小程序地圖定位開發教程‘’

前言

目前騰訊位置服務提供路線規划、地圖選點、地鐵圖、城市選擇器插件四款插件產品，本篇博客主要針對地圖選點功能進行實現。

開通騰訊位置服務

1、進入微信公眾平台

2、登錄進入小程序后台，選擇 “開發 - 開發工具 - 騰訊位置服務”

3、點擊 “開通”，進入授權掃碼界面

4、使用微信掃碼進行授權

5、綁定開發者賬號

接入插件

1、在小程序后台，選擇 “設置 - 第三方設置 - 插件管理”，點擊 “添加插件”

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

開發者密鑰配置

1、申請開發者密鑰

2、設置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": "你的位置信息將用於小程序定位"
        }
    }
}

3、代碼實現

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 接口參數說明：

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、效果實現

作者：盛夏溫暖流年

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

來源：CSDN

著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。