uniapp h5如何获取用户地理位置信息(使用高德地图)

 更新时间:2023年08月04日 09:45:19   作者:·枫  
这篇文章主要给大家介绍了关于uniapp h5如何获取用户地理位置信息的相关资料,文中主要使用高德地图,这里主要讲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)

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

 配置完成后使用高德的逆地理编码对上面请求拿到的经纬度进行解析

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如何获取用户地理位置信息的文章就介绍到这了,更多相关uniapp h5获取用户地理位置信息内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JavaScript 滚轮事件使用说明

    JavaScript 滚轮事件使用说明

    用过 Google 地图的人可能都很熟悉,通过滚动滚轮可以对地图进行缩放,非常地方便。适当地使用滚轮事件可以带来不错的用户体验。
    2010-03-03
  • javascript监听鼠标滚轮事件浅析

    javascript监听鼠标滚轮事件浅析

    这篇文章主要介绍了javascript监听鼠标滚轮事件浅析,使用具体例子说明,同时考虑了不同的浏览器,需要的朋友可以参考下
    2014-06-06
  • JS实现提示框跟随鼠标移动

    JS实现提示框跟随鼠标移动

    在本篇内容里小编给各位整理了一篇关于JS实现提示框跟随鼠标移动的相关实例代码,需要的朋友们学习下。
    2019-08-08
  • javascript原型模式用法实例详解

    javascript原型模式用法实例详解

    这篇文章主要介绍了javascript原型模式用法,以实例形式较为详细的分析了javascript原型模式的原理与使用技巧,需要的朋友可以参考下
    2015-06-06
  • 微信小程序 button样式设置为图片的方法

    微信小程序 button样式设置为图片的方法

    这篇文章主要介绍了微信小程序 button 的样式设置为图片的方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-06-06
  • TypeScript声明文件的实现示例

    TypeScript声明文件的实现示例

    TypeScript声明文件是一种包含TypeScript类型信息的.d.ts文件,它允许开发者为已存在的JavaScript代码提供类型注解,这些文件不包含可执行代码,下面就来详细的介绍一下TypeScript声明文件的实现,感兴趣的可以了解一下
    2025-12-12
  • 简化版手机端照片预览组件

    简化版手机端照片预览组件

    这篇文章主要介绍了简化版手机端照片预览组件的相关资料,需要的朋友可以参考下
    2015-04-04
  • JS button按钮实现submit按钮提交效果

    JS button按钮实现submit按钮提交效果

    今天在使用表单是同时使用POST更新、删除操作。然而form表单的 submit 且一旦提交则全部提交,所以想到的实现方法就是 使用button实现,怎么实现呢?下面小编给大家分享JS button按钮实现submit按钮提交效果,感兴趣的朋友参考下吧
    2016-11-11
  • js getBoundingClientRect使用方法详解

    js getBoundingClientRect使用方法详解

    这篇文章主要介绍了js getBoundingClientRect使用方法详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-07-07
  • JS实现密码框的显示密码和隐藏密码功能示例

    JS实现密码框的显示密码和隐藏密码功能示例

    这篇文章主要介绍了JS实现密码框的显示密码和隐藏密码功能,涉及javascript针对页面form表单元素动态操作的相关技巧,需要的朋友可以参考下
    2016-12-12

最新评论