uni-app 开发微信小程序定位功能
时间:2022-07-28 11:01:41|栏目:vue|点击: 次
使用onLocationChange方法持续监听地址,根据定位精度字段判断是否使用此次定位的经纬度。
已经会定位的直接跳七、相对精确的获取经纬度地址
一、注册账号
把信息都输入就好了
腾讯位置服务 - 立足生态,连接未来
二、创建应用和Key
1.进入控制台
2.创建应用
3.创建Key
启用产品勾选WebServiceAPI和微信小程序,填写相应信息。
三、登录微信公众平台后台
增加request合法域名:https://apis.map.qq.com
开发管理 —— 开发设置 —— 服务器域名 ——修改
四、下载微信小程序JavaScriptSDK
下载后放到自己的项目中
五、代码实现
var QQMap = require('../../js_sdk/qqmap-wx-jssdk.min.js') // SDK放置的路径 var qqmapsdk = new QQMap({ key: '**************' // 自己的Key });
六、一般获取经纬度地址
在比较繁华的地方,一般用这个就够了。
wx.getLocation({ type: 'wgs84', success: res => { console.log(res); //获取到经纬度值 qqmapsdk.reverseGeocoder({ // 根据经纬度转化为地址 location: { latitude: res.latitude, longitude: res.longitude }, success: res => { console.log(res); } }) } });
七、相对精确的获取经纬度地址
1.获取位置监听的权限
uni.authorize({ scope: 'scope.userLocation', success(res) { console.log(res); } })
2.开启位置监听
wx.startLocationUpdate({ success: res => { console.log(res); }, fail: res => { console.log(res); //在这里处理开启失败的业务逻辑 } })
3.监听实时地理位置变化
let index = 0; const _locationChangeFn = function(res) { console.log('location change', res) index++; //res.accuracy 代表定位精度, 这里根据定位精度和定位次数进行一个综合判断,根据用户在当前页面的停留时间进行相应的修改 if (index > 10 || (res.accuracy < 35 && index > 5)) { wx.offLocationChange(); wx.stopLocationUpdate(); qqmapsdk.reverseGeocoder({// 根据经纬度转化为地址 location: { //纬度 latitude: res.latitude, //经度 longitude: res.longitude }, success: function(res1) { console.log(res1.result); }, fail: function(res1) { console.log(res1); } }) } } //监听实时地理位置变化事件 wx.onLocationChange(_locationChangeFn)
这样定位出来的地址可能差不多,但是经纬度要比直接用getLocation获取到的更准确。
上一篇:利用Vue.js指令实现全选功能
栏 目:vue
本文标题:uni-app 开发微信小程序定位功能
本文地址:http://www.codeinn.net/misctech/209157.html