uni.getLocation无法触发,不管用的解决办法

前言

本文章解决了uni.getLocation在H5端以及小程序端的问题,APP端没有测试

在使用Uni开发多端应用时,我们用到定位的情况,首先会使用的就是uni自身提供的uni.getLocation,可是在代码中调用的时候,小程序端只返回了经纬度,H5端直接无法触发函数,甚至连调用失败fail都无法触发。接下来就解决掉这两端的问题

小程序端
首先说的是,我们单独拿到经纬度,无法获取到更加详细的信息(城市,城市编码,省份),这里我们只能调用第三方的定位来代替,在这里我使用的是高德的小程序SDK

1、首先是去注册高德的开发者平台账号,创建小程序定位得到小程序的key
2、下载高德小程序SDKhttps://lbs.amap.com/api/wx/download
3、注意看高德配置小程序SDK的注意事项,一步一步的配置好
在这里插入图片描述
4、引入到项目中(我是创建了一个定位配置文件)
在这里插入图片描述

引用你的定位配置文件
在这里插入图片描述

created() {
			// #ifdef MP-WEIXIN
			amapPlugin.getRegeo({
				success:(data)=>{
					console.log(data);
				},
				fail:(err)=>{
					console.log(err);
				}
			})
			// #endif
		},

好了,小程序端引用高德定位就完成了

H5
H5相对比较简单些,这这里提前说明一下,在H5端uni.getLocation不调用的原因是因为必须在HTTPS的环境下,并且谷歌浏览器极有可能把你的请求给墙掉,所以是无法调用起来uni.getLocation

1、首先把你的项目放到HTTPS中,你就可以调用起来uni.getLocation了,但是又是只有经纬度,并没有详细信息
2、调用高德WebAPI,利用经纬度请求出来定位的详细信息,代码如下,记得把key加上

// #ifdef H5
			
			uni.getLocation({
				success:(res)=> {
					uni.request({
						url:"https://restapi.amap.com/v3/geocode/regeo?parameters",
						method:'GET',
						data:{
							key:'key',
							location:`${res.longitude}, ${res.latitude}`
						},
						success:(data)=> {
							console.log(data.data)		// 注意就是data.data!!!
						},
						fail(err) {
							console.log(err)
						}
					})
				},
				fail(err) {
					console.log('错误');
					console.log(err);
				},
				complete() {
					console.log('完毕')
				}
			})
发布了61 篇原创文章 · 获赞 17 · 访问量 4万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 1024 设计师: 上身试试

分享到微信朋友圈

×

扫一扫,手机浏览