uniapp微信小程序使用腾讯地图选点插件

腾讯位置服务 地图选点插件

插件申请接入

在腾讯微信公众平台中, 登录微信小程序后台,设置 -> 第三方服务 -> 插件管理,点击 “添加插件”,搜索 “腾讯位置服务地图选点” 并添加。

引入插件包、设置定位授权

manifest.json -> 源码视图 -> mp-weixin 增加如下配置。

"permission": {
	"scope.userLocation": {
		"desc": "你的位置信息将用于小程序定位。"
	}
},
"plugins": {
	"chooseLocation": {
		"version": "1.0.10",
		"provider": "wx76a9a06e5b4e693e"
	}
}

使用插件

在页面中使用的示例

<template>
	<view>
		<button @click.stop="toMapSelection">----</button>
	</view>
</template>

<script>
	const chooseLocation = requirePlugin("chooseLocation");
	export default {
		onUnload() {
			chooseLocation.setLocation(null);
		},
		onShow() {
			const location = chooseLocation.getLocation();
			console.log(location); // 选择的位置信息
		},
		methods: {
			toMapSelection() {
				let key = '使用在腾讯位置服务申请的key';
				let referer = '调用插件的app的名称';
				uni.getLocation({
					type: 'wgs84',
					geocode: true,
					success: (res) => {
						wx.navigateTo({
							url: this.splicingParmas("plugin://chooseLocation/index", {
								key: key,
								referer: referer,
								location: JSON.stringify({
									latitude: res.latitude,
									longitude: res.longitude
								})
							})
						});
					},
					fail: (error) => {
						wx.navigateTo({
							url: this.splicingParmas("plugin://chooseLocation/index", {
								key: key,
								referer: referer
							})
						});
					}
				})
			},
			splicingParmas(url, params) {
				let str = url.endsWith("?") ? url.substring(0, url.length - 1) : url;
				Object.keys(params).forEach((key, index) => {
					str += (index === 0 ? "?" : "&") + key + "=" + params[key];
				})
				return str;
			}
		}
	}
</script>