uniapp h5如何获取用户地理位置信息(使用高德地图)
作者：·枫
这篇文章主要给大家介绍了关于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获取用户地理位置信息内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！