【微信小程序】如何获得自己当前的定位呢?本文利用逆地址解析、uni-app带你实现

【微信小程序】如何获得自己当前的定位呢?本文利用逆地址解析、uni-app带你实现

目录

前言

效果展示

一、在腾讯定位服务配置微信小程序JavaScript SDK

二、使用uni-app获取定位的经纬度

三、 逆地址解析,获取精确定位

四、小提示


前言

效果展示

一、在腾讯定位服务配置微信小程序JavaScript SDK

在浏览器搜索腾讯定位服务,找到官方网站,利用微信或者其他账号注册登录,登录后如下图操作

点进去之后,可以看到如下图红色框框的操作指导

第一步和第二步主要是申请秘钥和配置服务,可以直击点击我的应用跳转、接下来如下图片所示操作 

成功创建就会有如下图片的情况 

点击添加Key,然后进行配置 

配置成功,就会获得Key 

第三步、下载微信小程序JavaScriptSDK v1.1   JavaScriptSDK v1.2 其中的一个即可,然后解压文件后,将其放入项目中,我这里放入在我的***mon组件中

 第四步可以忽略,第五步就是将文件引入,到你想要展现定位的页面,把申请的Key引入到onLoad生命周期中

var QQMapWX = require('../../***mon/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',
	su***ess: function (res) {
		console.log('当前位置的经度:' + res.longitude);
		console.log('当前位置的纬度:' + res.latitude);
	}
});

 这里还需要在manifest.json中的源码视图中添加一段配置权限的代码

 "permission" : {
            "scope.userLocation" : {
                "desc" : "获取当前定位"
            }
        }

 

三、 逆地址解析,获取精确定位

调用qqmapsdk.reverseGeocoder的方法,在其中属性location中调用经纬度,这里要注意需要使用gcj02,还需要

通过属性su***ess, fail, ***plete的回调参数来接收调用结果su***ess的回调参数可以有2个,第1个参数接收调用结果,第2个参数控制返回处理后的数据(非必须参数),示例:su***ess:function(res,data)

 

 address是自己定义为空,来接收地址,req中有如下内容

 address只要获取到定位即可req.result.address

mounted() {
		uni.getLocation({
		type: 'gcj02',
		highA***uracyExpireTime: 100,
		su***ess: (res => {
				this.qqmapsdk.reverseGeocoder({
				location: {
					latitude: res.latitude,
					longitude: res.longitude
				},
				su***ess:(req=>{
					this.address = req.result.address
					console.log(this.address);
				})
			})
		})
	});
},

 最后在页面上渲染address即可

 代码段中highA***uracyExpireTime: 100,是高精度定位超时时间(ms),指定时间内返回最高精度,该值3000ms以上高精度定位才有效果,可以写也可以不写。

四、小提示

如果无法出现定位效果,需要降低调式基库的版本

结束语:

以上就是本次分享的全部内容,有任何问题,都可以私信我

转载请说明出处内容投诉
CSS教程_站长资源网 » 【微信小程序】如何获得自己当前的定位呢?本文利用逆地址解析、uni-app带你实现

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买