腾讯位置服务-地址逆解析项目应用——uniapp,vue

158 阅读1分钟

需求:根据经纬度逆解析当前定位信息,为用户展示实时位置信息等周边位置信息等。

开发平台:小程序,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()
    },