分享移动端获取当前经纬度并转换详细位置的方法（h5可用）

uniapp使用腾讯地图key获取当前经纬度并且转换成详细位置（需收费）

腾讯地图key申请官网

腾讯位置服务 - 立足生态，连接未来

具体申请方法可参考

h5平台腾讯定位地图应用key申请的方法_pr.map.qq.comz找key_赶一场落日的博客-CSDN博客

配置项

h5对应配置（其他平台自行配置）

使用uni官方接口获取当前经纬度（此处是获取当前经纬度方法）

Location() {
                let this_ = this
                uni.getLocation({
                    type: 'wgs84',
                    success: function(res) {
                        this_.formData.latitude = res.latitude
                        this_.formData.longitude = res.longitude
                        this_.getLocation(res.latitude, res.longitude)
                    },
                    fail: function(err) {
                        console.log(err, 'err');
                    }
                });

            },

使用经纬度转换详细位置（使用腾讯接口）

    getLocation(lat, lon) {
                let this_ = this
                var url = 'https://apis.map.qq.com/ws/' + '/geocoder/v1/?location=' + lat + ',' + lon+
                    '&key=' + 腾讯申请到的key
                uni.request({
                    url: url,
                    method: 'get',
                    success: (result) => {
                        this_.formData.translates = result.data.result.address
                    },
                    fail(res) {
                        console.log('失败了', res, url);
                    },
                });
            },

前端解决线上跨域

到线上使用 https://apis.map.qq.com/会跨域，如运维不想配置跨域前端解决方案（肯定有影响目前未发现可正常使用）

使用组件 vue-jsonp

下载按照

npm i vue-jsonp

使用方法

引入

import { jsonp } from 'vue-jsonp'

let url = 'https://apis.map.qq.com/ws/geocoder/v1/'

jsonp(url, {
                    key: TXKYE,//腾讯key
                    location: lat + ',' + lon,//经纬度
                    output: 'jsonp'
                }).then(res => {
                    this.formData.address = res.result.formatted_addresses.recommend
                    this.$toast.clear();
                })