0


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)

拿到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)
}
})
标签: uni-app 前端 vue.js

本文转载自: https://blog.csdn.net/w_z_bin/article/details/129144955
版权归原作者 ·枫 所有, 如有侵权,请联系我们删除。

“uniapp h5获取用户地理位置信息(高德地图)”的评论:

还没有评论