1.微信提供了wx.getLocation的方法可以获取到经纬度信息。在使用这个 API 之前需要首先设置 用户授权.
2.用户有可能在进入小程序的时候关闭了获取位置的权限, 当需要获取位置的时候要重新判断是否拥有权限。 如果没有权限需要再次提醒用户授权.
第一步
我们需要在 app.json
文件中首先配置 地理位置用途说明
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于小程序位置接口的效果展示"
}
}
第二步
在需要使用到 getLocation
接口的页面中的 xx.js
的 onLoad
方法中判断用户时候已经授权了 getLocation
的权限。
使用
wx.getSetting
获取所有已授权接口。 该接口会返回一个authSetting
对象, 里面包含了所有的授权结果。
// 用户授权位置信息
wx.getSetting({
success(res) {
if (res.authSetting['scope.userLocation'] === false) {
that.setData({
isLocation: false
})
}else{
//授权了
}
}
})
//授权了
1.3 将获取到的 经纬度传值给 getAddress 解析出 具体的地址
// 1.1 使用 getlocation 获取用户 经纬度位置
wx.getLocation({
success(res){
// 1.2 获取用户位置成功后,将会返回 latitude, longitude 两个字段,代表用户的经纬度位置
console.log(res)
// 1.3 将获取到的 经纬度传值给 getAddress 解析出 具体的地址
vm.getAddress(res.latitude, res.longitude)
},
fail(res) {
// 位置授权失败
wx.showToast({
title: '位置授权失败,请打开小程序设置开启位置服务',
icon: 'none'
})
}
})
转化经纬度。在这个方法中需要使用腾讯地图微信小程序JavaScript SDK 来作为工具。
https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview
getAddress(latitude, longitude) {
// 生成 QQMapWX 实例
let qqmapsdk = new QQMapWX({
key: '开发密钥(key)'
})
// reverseGeocoder 为 QQMapWX 解析 经纬度的方法
qqmapsdk.reverseGeocoder({
location: {latitude,longitude},
success(res) {
console.log('success', res)
vm.setData({
// ad_info: res.result.ad_info
// city: res.result.ad_info
})
},
fail: (res) => {
reject('获取位置信息失败')
}
})
}
//没有授权,打开授权设置页面
由于打开小程序设置页(wx.openSetting)接口调整。无法直接打开,故跳转授权页面指引用户授权https://developers.weixin.qq.com/community/develop/doc/000cea2305cc5047af5733de751008
<view class="container" wx:if="{{type == 2}}">
<view class="header">
<view class="title">授权位置信息</view>
<view class="sub-title">为了更好的体验,应用需要授权获取您的位置信息</view>
</view>
<tui-no-data imgUrl="/static/images/toast/img_noorder.png">打开【设置】页面,【位置信息】选择允许</tui-no-data>
<view class="getbuton">
<button type="primary" open-type="openSetting" bindopensetting="callback">打开设置</button>
</view>
</view>
相关文档:https://juejin.im/post/6844903816823832589