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

uniapp使用腾讯位置服务地图选点

效果图

1. 在公众平台申请插件

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

2. 引入插件

• 在pages.json中引入插件，根据个人需求，这里是在分包中引入插件

{
	"root": "hotel",
	"pages": [{}],
	"plugins": {
		"chooseLocation": {
			"version": "1.0.9",
			"provider": "wx76a9a06e5b4e693e" // 地图选点的APPID
		}
	}
}

3. 设置定位授权：

• 在manifest.json微信小程序配置中勾选位置接口权限并填写原因

4. 使用插件

• 根据个人需求调整，我这里新建一个页面调用插件，处理地图返回数据后，再返回上一页
• 从地图选点插件返回后，在页面的onShow生命周期函数中能够调用插件接口，取得选点结果对象

<template>
	<view>
		
	</view>
</template>

<script>
	const chooseLocation = requirePlugin('chooseLocation');
	
	export default {
		data() {
			return {
				
			}
		},
		onLoad() {
			// 1. 插件页面调用
			let latLng = uni.getStorageSync('location');
			const key = this.$config.mpKey; // 使用在腾讯位置服务申请的key
			const referer = 'xx商城'; // 调用插件的app的名称
			const location = JSON.stringify({
			  latitude: latLng.latitude,
			  longitude: latLng.longitude
			});
			const category = '酒店宾馆,旅游景点';
			
			uni.navigateTo({
				url: `plugin://chooseLocation/index?key=${key}&referer=${referer}&location=${location}&category=${category}`
			})
		},
		onShow() {
			// 个人需求处理【A页面使用地图选点，点击跳转到此页面，得到数据后返回A页面】
			let tmpVisit = uni.getStorageSync('isVisit')
			if (!tmpVisit && tmpVisit != null) {
				uni.navigateBack({
					delta: 1
				})
			}
			
			// 2. 如果点击确认选点按钮，则返回选点结果对象，否则返回null
			const location = chooseLocation.getLocation();
			if (location) {
				uni.removeStorageSync('isVisit')
				this.$store.commit('setChooseAdr', location);
			}
		},
		onHide() {
			uni.setStorageSync('isVisit', false)
		},
		onUnload() {
			chooseLocation.setLocation(null);
		},
		methods: {
			
		}
	}
</script>

<style>

</style>