需求:根据经纬度逆解析当前定位信息,为用户展示实时位置信息等周边位置信息等。
开发平台:小程序,h5等,当前以小程序接入为例。
文档地址:腾讯位置服务lbs.qq.com/
腾讯位置服务操作步骤:
1.lbs.qq.com/ 注册用户或登录账户
2.进入控制台-应用管理-创建应用-添加key 获取地址逆解析key并绑定appid及域名
utils/position.js
// 地里信息位置获取工具类
/**
* 获取用户当前所在的位置 【适应微信新版本获取地里位置信息,旧getLocation方法频繁调用有性能问题,并且30秒只能获得一次成功】
*/
import store from './store.js'
const getLocation = () => {
return new Promise((resolve, reject) => {
let _locationChangeFn = (res) => {
store.commit('setLocation', res)
console.log(res, '设置数据');
uni.setStorageSync('localtion', res)
resolve(res) // 回传地里位置信息
wx.offLocationChange(_locationChangeFn) // 关闭实时定位
wx.stopLocationUpdate(_locationChangeFn); // 关闭监听 不关闭监听的话,有时获取位置时会非常慢
}
wx.startLocationUpdate({
success: (res) => {
console.log(res, '开始获取实时位置');
wx.onLocationChange(_locationChangeFn)
},
fail: (err) => {
uni.removeStorageSync('localtion')
console.log(res, '重新获取位置权限');
// 重新获取位置权限
wx.openSetting({
success(res) {
res.authSetting = {
"scope.userLocation": true
}
}
})
reject(err)
}
})
})
}
module.exports = {
getLocation
}
main.js内引入
```import {
getLocation,
} from './util/position.js';
// 获取位置信息
Vue.prototype.getLocation = getLocation
`App.vue内使用`
```onShow: async function() {
console.log("App Show");
await this.getLocation()
},