做小程序的时候,有需要维护用户地理位置的地方,这时如果可以自动获取当前位置,对于提升用户体验有很大的帮助,然后查看官方文档,有个wx.getLocation接口,详细说明如下:
wx.getLocation(Object object)
调用前需要 用户授权 scope.userLocation
获取当前的地理位置、速度。当用户离开小程序后,此接口无法调用。
参数
Object object
属性 | 类型 | 默认值 | 是否必填 | 说明 | 支持版本 |
---|---|---|---|---|---|
type | string | wgs84 | 否 | wgs84 返回 gps 坐标,gcj02 返回可用于 wx.openLocation 的坐标 | |
altitude | string | false | 否 | 传入 true 会返回高度信息,由于获取高度需要较高精确度,会减慢接口返回速度 | >= 1.6.0 |
success | function | 否 | 接口调用成功的回调函数 | ||
fail | function | 否 | 接口调用失败的回调函数 | ||
complete | function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
object.success 回调函数
参数
Object res
属性 | 类型 | 说明 | 支持版本 |
---|---|---|---|
latitude | number | 纬度,范围为 -90~90,负数表示南纬 | |
longitude | number | 经度,范围为 -180~180,负数表示西经 | |
speed | number | 速度,单位 m/s | |
accuracy | number | 位置的精确度 | |
altitude | number | 高度,单位 m | >= 1.2.0 |
verticalAccuracy | number | 垂直精度,单位 m(Android 无法获取,返回 0) | >= 1.2.0 |
horizontalAccuracy | number | 水平精度,单位 m | >= 1.2.0 |
示例代码
wx.getLocation({
type: 'wgs84',
success (res) {
const latitude = res.latitude
const longitude = res.longitude
const speed = res.speed
const accuracy = res.accuracy
}
})
但是这个接口获取到的只有经纬度,如果只是使用经纬度的话,那至此完毕,如果需要获取当前城市以及街道的话,就需要用到腾讯地图来帮忙了
腾讯地图有个reverseGeocoder接口,可以根据用户的经纬度获取到城市的信息,当然首先需要去官网注册个账号,添加Key才能使用
然后从官网下载个qqmap-wx-jssdk,引入到小程序页面中,再调用接口就可以了,详细代码附上
autogetadd:function(){
var that=this;
var QQMapWX = require('../../utils/qqmap-wx-jssdk.min.js');
var qqmapsdk;
qqmapsdk = new QQMapWX({
key: '您的key'
});
wx.getLocation({
type: 'wgs84',
success: function (res) {
//2、根据坐标获取当前位置名称,显示在顶部:腾讯地图逆地址解析
qqmapsdk.reverseGeocoder({
location: {
latitude: res.latitude,
longitude: res.longitude
},
success: function (addressRes) {
var regionOne = "region.0";
var regionTwo = "region.1";
var regionTherr = "region.2";
that.setData({
[regionOne]: addressRes.result.address_component.province,//省
[regionTwo]: addressRes.result.address_component.city,//市
[regionTherr]: addressRes.result.address_component.district,//区
userAddressdetail: addressRes.result.address_component.street + addressRes.result.address_component.street_number//详细地址,包括街道+门牌号
})
}
})
}
})
},