【微信小程序】如何获得自己当前的定位呢?本文利用逆地址解析、uni-app带你实现
目录
cpu
城市功能区划分布数据
linux-jenkins
一、在腾讯定位服务配置微信小程序JavaScript SDK
MySQL Workbench
实训项目
Faster RCNN
技术影响力
前言
效果展示
ccna
一、在腾讯定位服务配置微信小程序JavaScript SDK
在浏览器搜索腾讯定位服务,找到官方网站,利用微信或者其他账号注册登录,登录后如下图操作
ferry
uni.getLocation
点进去之后,可以看到如下图红色框框的操作指导
时间表示
游戏
第一步和第二步主要是申请秘钥和配置服务,可以直击点击我的应用跳转、接下来如下图片所示操作
flowable
毕业设计
成功创建就会有如下图片的情况
MyBatis面试题
一条SQL语句是如何执行的
点击添加Key,然后进行配置
PoR
数据库架构
配置成功,就会获得Key
若依
Java前后端分离
第三步、下载微信小程序JavaScriptSDK v1.1 JavaScriptSDK v1.2 其中的一个即可,然后解压文件后,将其放入项目中,我这里放入在我的common组件中
域名
架构师
第四步可以忽略,第五步就是将文件引入,到你想要展现定位的页面,把申请的Key引入到onLoad生命周期中
前端
连接
var QQMapWX = require('../../common/lib/qqmap-wx-jssdk.min.js');
分页失效
this.qqmapsdk = new QQMapWX({
key: '3SUBZ-W5BCQ-FLM5G-GYOPG-D523V-DUFNH'
});
二、使用uni-app获取定位的经纬度
在uni-app的API中找到位置
将如下的代码放入mounted生命周期中获取经纬度
uni.getLocation({
type: 'wgs84',
success: function (res) {
console.log('当前位置的经度:' + res.longitude);
console.log('当前位置的纬度:' + res.latitude);
}
});
这里还需要在manifest.json中的源码视图中添加一段配置权限的代码
"permission" : {
"scope.userLocation" : {
"desc" : "获取当前定位"
}
}
三、 逆地址解析,获取精确定位
调用qqmapsdk.reverseGeocoder的方法,在其中属性location中调用经纬度,这里要注意需要使用gcj02,还需要
通过属性success, fail, complete的回调参数来接收调用结果success的回调参数可以有2个,第1个参数接收调用结果,第2个参数控制返回处理后的数据(非必须参数),示例:success:function(res,data)
address是自己定义为空,来接收地址,req中有如下内容
address只要获取到定位即可req.result.address
mounted() {
uni.getLocation({
type: 'gcj02',
highAccuracyExpireTime: 100,
success: (res => {
this.qqmapsdk.reverseGeocoder({
location: {
latitude: res.latitude,
longitude: res.longitude
},
success:(req=>{
this.address = req.result.address
console.log(this.address);
})
})
})
});
},
最后在页面上渲染address即可
代码段中highAccuracyExpireTime: 100,是高精度定位超时时间(ms),指定时间内返回最高精度,该值3000ms以上高精度定位才有效果,可以写也可以不写。
四、小提示
如果无法出现定位效果,需要降低调式基库的版本
结束语:
以上就是本次分享的全部内容,有任何问题,都可以私信我