首页 前端知识 uniapp h5端获取用户的地理位置(高德地图)

uniapp h5端获取用户的地理位置(高德地图)

2024-02-22 11:02:13 前端知识 前端哥 34 106 我要收藏

仅为记录和分享,并不全面,蛮看看
遇到的坑:
1、高德地图key,不要不敢申请,大胆申请;
2、uniapp h5端获取定位信息需要部署在https(uniapp官网获取地位;)(我是需要部署在https中)
3、用浏览器测试,需要打开浏览器的定位服务(本人用的是火狐);
4、微信内置浏览器获取高德API(高德官网)类型为:微信小程序
在这里插入图片描述

1、第一步申请高德API的key,申请类型为【web服务】与【微信小程序】
(1)【微信小程序】主要是兼容 微信内置浏览器
(2)【web服务】主要是uniapp H5端不能直接获取 地址信息(仅APP端支持),须先通过uni.getLocation获取经纬度,再通过第三方(高德)逆地理编码(高德逆地理编码)解析出地址信息

2、代码

/** 判断是否在微信浏览器*/
	is_wx() {
		let en = window.navigator.userAgent.toLowerCase()
		// 匹配en中是否含有MicroMessenger字符串
		if (en.match(/MicroMessenger/i) == 'micromessenger') {
			this.getLocation()//微信内置浏览器
			// return true
		}
		if (en.match(/MicroMessenger/i) != 'micromessenger') {
			this.getAreas()//其他浏览器
			// return false
		}
	},
	// 微信内置浏览器
	getLocation() {
		const amapPlugin = new amap.AMapWX({
			key: '11111111111'//高德API key类型:微信小程序
		})
		amapPlugin.getRegeo({
			success: (data) => {
				const longs = data[0].longitude
				const lat = data[0].latitude
				if (longs !== '' && lat !== '') {
					this.turnAdrr(longs, lat)//经纬度转地区名
				}
			},
			fail: (err) => {
				console.log(err);
			}
		})
	},
	//其他浏览器
	getAreas() {
		uni.getLocation({
			type: 'gcj02', //返回可以用于uni.openLocation的经纬度
			success: (res) => {
				const longs = res.longitude.toString();
				const lat = res.latitude.toString();
				if (longs !== '' && lat !== '') {
					this.turnAdrr(longs, lat)//经纬度转地区名
				}
			}
		});
	},
	// 转地址
	turnAdrr(longs, lat) {
		// 高德逆地理变码 https://lbs.amap.com/api/webservice/guide/api/georegeo/
		let _key = '2222222';//高德API key类型:web服务
		uni.request({
			method: 'GET',
			url: 'https://restapi.amap.com/v3/geocode/regeo?parameters',
			data: {
				key: _key,
				location: `${longs},${lat}`,
				output: 'JSON'
			},
			success: async (res) => {
				const resData = res.data
				const city = resData.regeocode.formatted_address
				var ques = {
					viewerArea: city,
				}
				await potUserInfos(ques).then(res => {})
			},
			fail: r => {
				console.log(r);
			}
		});
	},

高德逆地理解析:
在这里插入图片描述

转载请注明出处或者链接地址:https://www.qianduange.cn//article/2471.html
评论
发布的文章

jQuery中的ajax

2024-03-07 08:03:42

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!