uniapp接入微信小程序地图选点插件

需求背景

有一款基于uniapp开发的微信小程序，用于线下营销，需要通过地图选点，录入门店地址和坐标

接入流程

一、申请开发者秘钥（key）

调用地图选点插件需要申请腾讯位置服务的服务账号，key是开发者的唯一标识。开发者通过key可以调用腾讯位置服务官网提供的相关服务。

申请key的具体流程如下：

1. 注册腾讯位置服务账号

2. 申请密钥

创建应用

添加key

注意

a) 勾选“WebService API”，把“servicewechat.com”域名添加进域名白名单中，否则小程序下将无法正常使WebServiceAPI服务

b) 勾选“微信小程序” -> 填写“授权 APP ID”

二、接入插件

1. 插件申请接入

在腾讯微信公众平台中， “微信小程序官方后台-设置-第三方服务-插件管理” 里点击 “添加插件”，搜索 “腾讯位置服务地图选点” 申请，申请后小程序开发者可在小程序内使用该插件。

2. 设置地图插件和位置授权

• 引入插件包： 地图选点appId： wx76a9a06e5b4e693e （点击浏览插件最新版本）
• 设置定位授权：地图选点插件需要小程序提供定位授权才能够正常使用定位功能；

// manifest.json
{
    ...
    
    "mp-weixin": {
        ...
        /* 引入地图选点插件 */
        "plugins": {
            "chooseLocation": {
                "version": "1.0.10",
                "provider": "wx76a9a06e5b4e693e"
            }
        },
        /* 设置定位授权 */
        "permission": {
            "scope.userLocation": {
                "desc": "你的位置信息将用于小程序位置接口的效果展示"
            }
        }
    }
}

3. 使用插件

• 点击跳转地图选点插件
• 返回页面后，获取选点结果对象

<template>
    <view>
        <view @click="onClick">
            调用地图选点
        </view>
    </view>
</template>

<script>
const chooseLocation = requirePlugin('chooseLocation');

export default {
    // 从地图选点插件返回后，在页面的onShow生命周期函数中能够调用插件接口，取得选点结果对象
    onShow() {
        // 如果点击确认选点按钮，则返回选点结果对象，否则返回null
        const location = chooseLocation.getLocation();
        console.log(location);
    },
    onUnload() {
        // 页面卸载时设置插件选点数据为null，防止再次进入页面，geLocation返回的是上次选点结果
        chooseLocation.setLocation(null);
    },
    methods: {
        onClick() {
            const key = ''; // 使用在腾讯位置服务申请的key
            const referer = ''; // 调用插件的app的名称
            const location = JSON.stringify({
                latitude: 22.55329,
                longitude: 113.88308
            });
            const category = '生活服务,娱乐休闲';
            wx.navigateTo({
                url: 'plugin://chooseLocation/index?key=' + key + '&referer=' + referer + '&location=' + location + '&category=' + category
            });
        },
    }
};
</script>

效果预览

相关参数说明

参考腾讯地图选点插件官方说明