前言

目前腾讯位置服务提供四种插件产品：路线规划、地图选择、地铁地图、城市选择器插件。本博客主要实现地图选择功能。

启用腾讯定位服务

1、进入微信公众平台

2、登录小程序后台，选择“开发-开发工具-腾讯定位服务”

3、点击“激活”进入授权扫码界面

4、使用微信扫码授权

5、绑定开发者账号

访问插件

1、在小程序后台，选择“设置-第三方设置-插件管理”微信小程序开发中地图分布，点击“添加插件”

2、搜索“腾讯定位服务地图选择”添加

开发者密钥配置

1、申请开发者密钥

2、设置KEY的“启用产品”

一个。查看微信小程序，设置授权APP ID

可以通过“设置-基本设置”的账号信息查看授权的APP ID

b.检查“API”

小程序插件需要使用API​​的部分服务，所以需要为使用该功能的KEY配置相应的权限。

如果填写域名白名单，需要将域名加入域名白名单，否则小程序将无法正常使用服务。

插件的使用

1、介绍插件

地图选择：

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

2、设置位置授权

选图插件需要小程序提供定位授权才能正常使用定位功能

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

3、代码实现

一、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 }); } });

:/// 接口参数说明：

b、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、效果实现