uniapp h5获取用户地理位置信息（高德地图）-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp h5获取用户地理位置信息（高德地图）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

使用uni.getLocation()先获取到当前位置信息的经纬度

H5端测试可以使用http，上线打包需要设置为https模式

谷歌浏览器可能会获取不到任何信息，因为谷歌浏览器位置信息是连接谷歌服务器获取的，国内用户可能获取位置信息失败

getCurrentlocation(){
    let that = this
	uni.getLocation({
	type: 'wgs84',
	isHighAccuracy: true,//开启高精度定位
	success(res) {
	console.log('当前位置的经度：' + res.longitude);
	console.log('当前位置的纬度：' + res.latitude);
	}
	})
}

使用高德开发平台注册一个key

高德开发平台：高德开放平台 | 高德地图API (amap.com)

h5定位获取地址,uni-app,前端,vue.js

拿到key在manifest.json里进行配置

h5定位获取地址,uni-app,前端,vue.js

配置完成后使用高德的逆地理编码对上面请求拿到的经纬度进行解析文章来源地址https://www.toymoban.com/news/detail-549013.html

	turnAdrr(longitude, latitude) {
				let that = this
				let _key = '高德里你注册的key'; //高德API key类型：web服务
				uni.request({
					method: 'GET',
					url: 'https://restapi.amap.com/v3/geocode/regeo?parameters',
					data: {
						key: _key,
						location: `${longitude},${latitude}`,
						output: 'JSON',
					},
					success: (res) => {
						console.log(res.data.regeocode.formatted_address);
				           //用户所在的地理位置信息
					},
					fail: r => {
						console.log(r);
					}
				});
			}

App的话可以直接调用uni.getLocation()拿到用户的所在位置，不需要进行解析，可以直接拿到

uni.getLocation({
    type: 'gcj02', //app直接获取地理位置信息要使用gcj02
    geocode:true , //必须要将geocode配置为true
	isHighAccuracy: true,
	success(res) {
		console.log(res.address)
	},
    fail(err){
    console.log(err)
}
})

到了这里，关于uniapp h5获取用户地理位置信息（高德地图）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！