uni-app微信小程序结合腾讯地图获取定位导航以及城市选择器

目录

第一步：登录小程序公众平台==>设置==>第三方设置

 第二步：登录腾讯地图申请属于自己小程序的key

 第三步：找到腾讯地图的插件​​​​​​​

 第四步：添加插件与允许授权

 第五步：使用

---

第一步：登录小程序公众平台==>设置==>第三方设置

 

 第二步：登录腾讯地图申请属于自己小程序的key

 腾讯地图后台：https://lbs.qq.com/dev/console/application/mine

 

 添加key，授权使用的小程序appId

 第三步：找到腾讯地图的插件

 插件文档：https://lbs.qq.com/miniProgram/plugin/pluginGuide/pluginOverview

 第四步：添加插件与允许授权

    "plugins" : {
            "chooseLocation" : {
                "version" : "1.0.9",
                "provider" : "wx76a9a06e5b4e693e"
            },
            "citySelector" : {
                "version" : "1.0.1",
                "provider" : "wx63ffb7b7894e99ae"
            }
        },

 第五步：使用

1.地图中选择位置

    const key = ""; //使用在腾讯位置服务申请的key
	const referer = ''; //调用插件的app的名称
	const location = JSON.stringify({
		// 修改时回显位置
		latitude: this.form.lat || this.location.latitude,
		longitude: this.form.lon || this.location.longitude
	});
	const category = '生活服务,娱乐休闲';
	uni.navigateTo({
		url: 'plugin://chooseLocation/index?key=' + key + '&referer=' + referer + '&location=' +
			location + '&category=' + category
	});

返回结果接收

const chooseLocation = requirePlugin('chooseLocation')
		
onShow() {
		const location = chooseLocation.getLocation(); // 如果点击确认选点按钮，则返回选点结果对象，否则返回null
		console.log(location)
		if (location) {
			this.form.actiPlace = location.name
			this.form.actiCity = location.city
			this.form.lat = location.latitude
			this.form.lon = location.longitude
		}
	},
	onUnload() {
		// 页面卸载时设置插件选点数据为null，防止再次进入页面，geLocation返回的是上次选点结果
		chooseLocation.setLocation(null);
	},

2.城市列表选择

	const key = ''; //使用在腾讯位置服务申请的key
	const referer = ''; //调用插件的app的名称
	const hotCitys = ''; // 用户自定义的的热门城市
	uni.navigateTo({	              
       url:`plugin://citySelector/indexkey=${key}&referer=${referer}&hotCitys=${hotCitys}`,
	})

返回结果接收

const citySelector = requirePlugin('citySelector')

onShow() {
	const selectedCity = citySelector.getCity(); // 选择城市后返回城市信息对象，若未选择返回null
	console.log(selectedCity)
	if (selectedCity) {
		let cityInfo = {
			city: selectedCity.fullname,
			latitude: selectedCity.location.latitude,
			longitude: selectedCity.location.longitude
		}
},
onUnload() {
	// 页面卸载时清空插件数据，防止再次进入页面，getCity返回的是上次的结果
	citySelector.clearCity();
},

 更多操作请参考腾讯文档：https://lbs.qq.com/miniProgram/plugin/pluginGuide/pluginOverview