uniapp微信小程序获取当前城市位置地址信息

1. 去腾讯位置服务的控制台创建一个应用

腾讯位置服务网址

2.添加一个key,并开通WebServiceAPI服务和微信小程序授权AppID

3.下载微信jssdk(这里会用到逆地址解析等等)

点击下载

 下载好后,将它放在这个文件夹中进行使用,没有common文件夹的话可以新建,或者放在其它文件夹也行(不一定跟我一样),看自己习惯,只要到时候导入路径写对。

4.去小程序后台管理开启安全域名 

找到服务器域名,将https://apis.map.qq.com域名添加进去,操作如下图:

5.修改配置manifest.json文件

还要切换到源码视图模式,找到 小程序特有相关下,将这段代码添加在permission之后,具体代码和示例如下:

 "permission" : {
    "scope.userLocation" : {
      "desc" : "将获取你的具体位置信息,用于帮助用户浏览所在位置的零活信息"
     }
  },
  "requiredPrivateInfos" : [ "getLocation", "chooseLocation" ]

6.在使用到的页面引入sdk

    //引入腾讯地图SDK核心类,
    import QQMapWX from '../../common/qqmap-wx-jssdk.js'

不过这里有个坑,这样导入会报错,我查阅了一下,使用require导入也不行,具体是这样操作之后就可以了。

找到刚才你下载的sdk源文件,打开它滑倒最下面,将module.exports = QQMapWX;注释掉,换成export default QQMapWX;就可以

7.使用uni.getLocation获取经纬度信息给QQMapWX实例进行使用,这里我直接上代码了

			//获取城市
			let that = this
			// 实例化腾讯API核心类
			let qqmapsdk = new QQMapWX({
				key: this.QQMapWXKey
			});
			//检查本地是否有存储城市信息
			if (uni.getStorageSync('city') && uni.getStorageSync('latitude')) {
				that.latitude = uni.getStorageSync('latitude')
				that.longitude = uni.getStorageSync('longitude')
				that.city = uni.getStorageSync('city')
			} else {
				//如果本地没有存储就通过uni.getLocation获取当前位置的经纬度
				uni.getLocation({
					type: 'gcj02',
					success: function(res) {
						uni.setStorageSync('latitude',res.latitude) 
						uni.setStorageSync('longitude',res.longitude) 
						// 通过经纬度获取当前城市信息
						qqmapsdk.reverseGeocoder({
							location: {
								latitude: uni.getStorageSync('latitude'),
								longitude: uni.getStorageSync('longitude')
							},
							success: function(res1) {
								that.city = res1.result.ad_info.district;
								uni.setStorageSync('city',res1.result.ad_info.district)
							},
							fail:function(res) {
								uni.showToast({
									title:res.message,
									icon:'none'
								})
							}
						})
					},
					fail: function() {
						uni.showToast({
							title: "当前位置信息获取失败",
							icon: 'none'
						})
					}
				})
			}

具体返回的json数据可打印出来看下,因为请求的腾讯api每天的额度有上限,具体额度需要到腾讯位置服务控制台中调配。

9.可能存在位置发生偏移(不准确)的问题

我将获取到的经纬度拿去坐标拾取器里面复原位置是准确的,也就是说经纬度对应逆地址解析的位置是正确的,问题出现在获取到的经纬度不准确。综合来看,就是uni.getLocation的问题。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

大锐爱学习

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值