开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第6天，点击查看活动详情

前言

最近开发小程序需要设置收货地址，这里感觉手写不是那么操作方便，对比了很多其他小程序都有打开地图进行当前位置选点的操作，因此特意查看了相关资料，记录引入腾讯地图选点插件操作。

引入流程

1.首先需要在小程序的微信账号平台设置-〉第三方服务-〉第三方设置-〉插件管理-〉添加插件

点击添加插件，搜索 “腾讯位置服务地图选点” ，即可申请成功。

2.引入插件包这里需要在uni-app里配置一下根据官方说明文档

mp.weixin.qq.com/wxopen/plug…

在Hbuildx 开发工具里找到manifest.json配置-》源码视图添加插件配置plugins如下，同时添加权限permission如下，这2个是必须的。

/* 小程序特有相关 */
	"mp-weixin": {
		"appid": "**********",
		"setting": {
			"urlCheck": false,
			"postcss": true,
			"minified": true
		},
		"usingComponents": true,
		"permission": {
			"scope.userLocation": {
				"desc": "你的位置信息将用于小程序收货地址定位"
			}
		},
		"plugins": {
			"chooseLocation": {
				"version": "1.0.9",
				"provider": "wx76a9a06e5b4e693e"
			}
		}
	},

3.代码中使用

注意下面这个腾讯服务位置申请的key需要去腾讯地图注册账号创建应用，然后设置我们的appid，才能拿到这个key.

注册并登录腾讯地图api获取key:

[控制台->我的应用->创建应用->填写信息->添加Key]

                chooseAddress() {
                            const key = '**************'; //使用在腾讯位置服务申请的key
				const referer = '旭通内卖'; //调用插件的app的名称
				// const location = JSON.stringify({
				//   latitude: 39.89631551,
				//   longitude: 116.323459711
				// });
				// const category = '生活服务,娱乐休闲';

				uni.navigateTo({
					url: `plugin://chooseLocation/index?key=${key}&referer=${referer}`
				});			
			},

如上即可打开一个新的页面获取到选点的地址，一般开发中，我们的界面如下需要填写收货地址

点收货地址那一栏设置点击触发跳转插件选取位置。

点击确认后，回到上一个页面，我们需要在这个页面引入对应包，获取到返回的位置

const chooseLocation = requirePlugin('chooseLocation');
onShow() {
			const location = chooseLocation.getLocation(); // 如果点击确认选点按钮，则返回选点结果对象，否则返回null
			console.log('选择的位置：', location);
		}

这里便可以取到这个选中的位置信息，然后就可以显示在我们的界面上，如果保存就上传到我们的后台，一个收货地址遍获取完毕，这是一个小程序插件提供的便利。

总结

关于接入腾讯地图选点插件基本就是这样的流程，基于相关资料查询，在小程序里使用腾讯地图插件而申请的这个key是不收费的，所以可以放心使用。

uni-app小程序接入腾讯地图选点插件

前言

引入流程

总结