uniapp h5、app获取经纬度、地址

1 安装vue-resource, 因为h5请求会跨域,我们需要安装这个插件

 cnpm install vue-jsonp --save  或 npm install vue-jsonp --save 根据使用的包管理器来

2 main.js文件中引入vue-resource并通过命令Vue.user()使用该插件

import VueJsonp from ‘vue-jsonp’
Vue.use(VueJsonp)

3 创建一个文件,开始写功能,我是创建了一个工具文件夹utils放在indedx.js文件夹下

import { jsonp } from 'vue-jsonp';
//app直接获取地理位置，不需要发起请求
export function getLocationInfo() { //2. 获取地理位置
    // #ifdef H5
    // 适配h5请求跨域问题
    return new Promise((resolve, reject) => {
        uni.getLocation({
            type: 'gcj02',
            success: async (res) => {
                const latitude = res.latitude.toString();
                const longitude = res.longitude.toString();

                uni.setStorage({ //将经纬度保存到本地
                    key: 'coordinate',
                    data: {
                        'latitude': res.latitude,
                        'longitude': res.longitude,
                    },
                });
                const url = 'https://apis.map.qq.com/ws/geocoder/v1';
                //通过经纬度换取地址
                await jsonp(url, {
                    key: '4KQBZ-W5N36-CJKSF-EQQN4-2OXTZ-V4F5J',
                    location: `${latitude},${longitude}`,
                    output: 'jsonp',
                }).then(re => {
                    // console.log(re, 'Tengx ');
                    let address = re.result.address_component;
                    resolve(address);
                }).catch(err => {
                    console.log(err);
                    reject(err);
                });
            },
        });
    });
    // #endif
    return new Promise((resolve, reject) => {
        uni.getLocation({
            type: 'gcj02',
            success(res) {
                let latitude, longitude;
                uni.setStorage({ //将经纬度保存到本地
                    key: 'coordinate',
                    data: {
                        'latitude': res.latitude,
                        'longitude': res.longitude
                    }
                });
                latitude = res.latitude.toString();
                longitude = res.longitude.toString();
                uni.request({
                    header: {
                        "Content-Type": "application/text"
                    },
                    url: 'https://apis.map.qq.com/ws/geocoder/v1/?location=' + latitude + ',' +
                        longitude + '&key=4KQBZ-W5N36-CJKSF-EQQN4-2OXTZ-V4F5J',
                    success(re) {
                        if (re.statusCode === 200) {
                            let address = re.data.result.address_component;
                            resolve(address);
                        } else {
                            // getLocationInfo();
                        }
                    }
                });
            }
        });
    })

}

4 页面调用,在需要使用的页面引入并调用该函数即可如:home.vue页面

<script>
    import {getLocationInfo,} from "../../utils/index.js";
onReady() {
        this.onGetArea(
        },
methods:{
       async onGetArea() {
        let address = await getLocationInfo()
}
}

题外话,如果仅需要经纬度,可以直接使用uni.getLocation获取到