uniapp开发微信小程序 腾讯位置地图定位开发,可在获取用户定位,获取用户收货位置等地方使用

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

一、 登录腾讯地图官网

地址: 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

  • 8
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值