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获取用户地理位置信息内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了微信小程序用户拒绝授权的处理方法详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-09-09
下面小编就为大家带来一篇浅谈DOM的操作以及性能优化问题-重绘重排。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-01-01
动态生成方法的例子，这些方法在新对象实例化的时候创建2009-07-07
UniApp中Scroll-View设置占满下方剩余高度的方法记录
在使用uniapp开发项目过程中有时候会想让一些组件占有屏幕剩余的高度,下面这篇文章主要给大家介绍了关于UniApp中Scroll-View设置占满下方剩余高度的方法,需要的朋友可以参考下2023-04-04
Javascript实现快速排序（Quicksort）的算法详解
排序算法（Sorting algorithm）是计算机科学最古老、最基本的课题之一，要想成为合格的程序员，就必须理解和掌握各种排序算法。2015-09-09
这篇文章主要为大家介绍了js获取两个数组对象的差集实现方法,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
基于JavaScript的操作系统，你听说过吗？小编也是第一次听说，接触，和大家一起了解一下2016-01-01
这篇文章主要介绍了TypeScript 装饰器定义，装饰器是一种新的声明，它可以作用于类声明 、方法 、访问器 、属性以及参数上，下面我们就来看看TypeScript 装饰器的具体定义吧,需要的朋友可以参考一下，希望对你有所帮助2021-12-12
webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler),下面这篇文章主要给大家介绍了关于webpack打包进度展示以及美化的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-01-01
微信小程序通过点击事件跨页面传参及data-方法传参（data-）的示例详解
在 vue 中，我们可以直接在点击事件中放入传递的参数进行传参；然而微信小程序中并不适用这样的写法，但是微信小程序可以通过自定义属性从而绑定参数使用，这篇文章主要介绍了微信小程序通过点击事件跨页面传参以及data-方法传参（data-）,需要的朋友可以参考下2023-12-12
最新评论