uni-app开发微信小程使用腾讯位置服务获取用户的位置信息

uni-app开发微信小程使用腾讯位置服务获取用户的位置信息

一、开通腾讯位置服务

在这里我们先要登录腾讯我i之服务的官网开通位置服务 腾讯位置服务官网
在这里插入图片描述
点击进入控制台,创建应用并创建key,并将填写微信小程序ID
在这里插入图片描述
进入微信公众平台将请求域名设为合法域名
在这里插入图片描述
下载 微信小程序 JavaScript SDK 并在项目中创建lib目录,将SDK文件放入该目录
在这里插入图片描述

二、编码实现

(一)获取定位坐标

微信小程序提供定位接口,我们只需要调用方法即可。uni-app框架的uni对象里面也封装了定位的方法
1.uni.getLocation(Object)
Object参数说明

参数名类型必填说明平台差异说明
typeString默认为wgs84返回gps坐标
altitudeBoolean传入true会返回高度信息,由于获取高度需要较高精确度,会减慢接口返回速度App和字节跳动
geocodeBoolean默认false,是否解析地址信息仅App平台支持
successFunction接口调用成功的回调函授,返回内容详见参数返回说明
failFunction接口调用失败的回调函数,返回内容详见返回参数
completeFunction接口调用结束的回调函数(调用成功,失败都会执行)

success返回参数说明

参数说明
latitude纬度,浮点数,范围为-90-90,负数表示南纬
longitude经度,浮点数,范围为-180-180,负数表示西经
speed速度,浮点数,单位m/s
accutracy位置的精确度
altitude高度,单位m
verticalAccuracy垂直精度,单位 m(Android无法获取,返回 0)
horizontalAccuracy水平精度,单位m
address地址信息(仅App端支持,需配置geocode为true)

address地址信息说明

属性类型描述
countryString国家
provinceString省份名称
cityString城市名称
districtString区(县)名称
streetString街道信息
streetNumString街道门牌号
poiNameStringPOI信息
postalCodeString邮政编码
cityCodeString城市代码

示例:

uni.getLocation({
    type: 'wgs84',
    success: function (res) {
        console.log('当前位置的经度:' + res.longitude);
        console.log('当前位置的纬度:' + res.latitude);
    }
});
(二)、在项目中使用

1. 先要开启位置权限,我使用的HBuilder X 2.9.8版本
如不开启就获取不到经纬度
在这里插入图片描述

2. 首先要获取用户签到时的地理位置(经度、纬度)

uni.showLoading({
	title: '签到中请稍后'
});

setTimeout(function() {
	uni.hideLoading();
}, 30000);

//获取地理定位
uni.getLocation({
	type: 'wgs84',
	success: function(resp) {
		let latitude = resp.latitude; 
		let longitude = resp.longitude;
	}
})

3. 根据定位坐标,换算成真实的地址,先引用腾讯位置的SDK文件

var QQMapWX = require('../../lib/qqmap-wx-jssdk.min.js');
var qqmapsdk;

4.使用onLoad生命周期函数,对qqmapsdk对象进行初始化

onLoad: function() {
	qqmapsdk = new QQMapWX({
		key: '这里填写你生成的key'
	});
},

如下图:
在这里插入图片描述
请求接口进行置换

qqmapsdk.reverseGeocoder({
	location: {
		latitude: latitude,
		longitude: longitude
	},
	success: function(resp) {
		// console.log(resp.result);
		let address = resp.result.address;
		let addressComponent = resp.result.address_component;
		let nation = addressComponent.nation;
		let province = addressComponent.province;
		let city = addressComponent.city;
		let district = addressComponent.district;
	}
})
  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值