效果展示
在这里插入图片描述

一、 登录腾讯地图官网

地址: https://lbs.qq.com/
1、注册登录
2、进入应用管理
在这里插入图片描述在这里插入图片描述
3、分配配额 (为了解决 调用腾讯地图插件 提示此key每日调用量已达上限的问题)
配额根据实际情况进行分配(下面只是开发调试时分配的配额)
在这里插入图片描述
在这里插入图片描述

二、 登录微信公众平台

1、添加插件 (进入设置 – 第三方设置 – 添加插件 )
在这里插入图片描述

三、使用插件

1、 在manifest.json中配置插件 配置定位权限
在这里插入图片描述
插件

"plugins" : {   
	"chooseLocation": {
		"version": "1.0.10",
		"provider": "wx76a9a06e5b4e693e"
	}
},

权限

"permission" : {
   "scope.userLocation" : {
       "desc" : "获取当前城市"
    }
},

2、使用插件
在需要跳转的函数中写入

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 + '&location=' + location + '&category=' + category
});

在这里插入图片描述
如何获取从定位界面返回后取得的参数?
在调用界面的onshow函数中使用,在onUnload函数中清除数据

onShow() {
	const chooseLocation = requirePlugin('chooseLocation');
		const location = chooseLocation.getLocation();
		if(location){
			this.province = location.province;
			this.city = location.city;
			this.area = location.district;
			this.address = this.provice + '-' + this.city + '-' + this.area;
			this.addressDetail = location.name;
	}
},
onUnload () {
	// 页面卸载时设置插件选点数据为null,防止再次进入页面,geLocation返回的是上次选点结果
	const chooseLocation = requirePlugin('chooseLocation');
	chooseLocation.setLocation(null);
}

注:腾讯位置服务小程序插件介入文档
https://lbs.qq.com/miniProgram/plugin/pluginGuide/locationPicker

Logo

北京人形旗下天工造物具身智能开源社区,聚焦具身天工与慧思开物两大平台

更多推荐