评论

uniapp微信小程序之逆地址解析获取当前位置

uniapp微信小程序之逆地址解析获取当前位置

准备工作

1、安装uniapp

npm install -g @vue/cli
vue create -p dcloudio/uni-preset-vue my-project 


2、为了更酸爽的开发体验,请先下载开发工具: HBuilderX微信开发工具

3、生成一个uniapp项目作为测试项目,如果还没有,emmm……就假设已经有了,快速创建,戳->

好了,正文开始:

一、获取所在位置一般是公用的,所以我们新建功能组件进行开发,首先,在根目录下新建功能文件的目录:

二、在项目的初始化文件里引入新增的功能文件:

三、编写功能组件逻辑:

1、获取地理位置需要上帝们的授权,官方文档写了,这里必须假模假样的填写一下理由,那我们也写得正经一点好了,同样,填写上你项目的appid,然后调用授权方法。

//检测用户是否授权
uni.authorize({
	scope: 'scope.userLocation',
	success(){},
	fail(res){
		console.log(res);
	}
})

2、授权成功之后,开始定位,获取当前的经纬度坐标

//获取经纬度坐标
uni.getLocation({
	type:'gcj02',
	success(res){
		console.log('res.latitude',res.latitude,'res.longitude',res.longitude);
	}
})

成功之后,控制台的输出是介样的:

3、取到的坐标值转换成具体的方位,这里我们测试用到的是腾讯地图,这里我们需要先做一下小小的准备。

A、首先,你得有一个可以用的微信小程序appid,自行去小程序开发平台复制下,就不用写了哈~~~~

B、腾讯地图的使用key密钥:

没有的话可以创建一个,反正也不要钱 @。@!,注意填写的appid是你项目用的appid,如果是测试,则勾选域名白名单即可,如果是正式项目,则需要在文本框里填写具体。

然然然后,下载skd的js文件到你的项目中,并且引入:

好了,现在已经有了一串你看不懂的密钥,直接复制下,使用逆地址解析的方法, 

let qqmapsdk = new QQMapWX({
  key: 'Hxxxxx-xxxxxxxxxxxxxxxxxxxx-xxxxx6'
});

在获取经纬度的成功回调里写入:
//逆地址解析
qqmapsdk.reverseGeocoder({
	location:{
		latitude: res.latitude,
		longitude: res.longitude
	},
	success(res){
		console.log("res",res);
	}
})


控制台输出值,说明成功了,pc端的测试精准度可能没这么高,用手机定位会更加准确一些~~~~




撒花完结~~~~~~~~~~

最后一次编辑于  2020-08-20  
点赞 3
收藏
评论

5 个评论

  • JoJo
    JoJo
    2021-03-18

    勾选webserviceAPI时选择签名怎么弄啊,求大佬指点

    2021-03-18
    赞同 2
    回复
  • 济南千乐网络科技有限公司
    济南千乐网络科技有限公司
    2020-08-20

    666

    2020-08-20
    赞同 2
    回复
  • MuJia
    MuJia
    2021-07-17

    大佬,跨域怎么解决

    2021-07-17
    赞同
    回复
  • 马永东
    马永东
    2021-02-27

    大佬

    2021-02-27
    赞同
    回复
  • 11月
    11月
    2020-08-20

    6

    2020-08-20
    赞同
    回复
登录 后发表内容