uniapp实现获取用户位置信息（经纬度），通过高德地图和腾讯地图解析

1.各位同仁，这是我写公司一个项目时候需要业务员到地方后上传位置信息和数据库中的进行比对，这时候肯定要用到uniapp中的uni.getLocation(object)这个接口了，这个接口的具体参数大家可以查看uniapp官网（uni.getLocation(OBJECT) | uni-app官网），记得配置高精度，特别注意默认为 wgs84 返回 gps 坐标，gcj02 返回国测局坐标

废话不多说直接上干货

1.高德地图解析经纬度坐标

①首先第一步打开高德地图的控制台（首页 | 高德控制台）

这是第一步，我们需要配置高德地图的key这个key记住很重要后边能不能解析就看这个了。

②第二步，在微信开发者平台配置服务（微信公众平台）配置域名如下

 ③第三步就是最重要的一步解析上代码

获取位置信息的事件

<view class="orginfotitle1" style="display: flex; justify-content: space-between">位置信息：

                            <view class="workDownlist1"   @click="getLocation">{{address}}</view>

      </view>

获取当前位置（先获取到经纬度，在解析）

            getLocation() {

                const that = this;

                // 获取位置信息

                uni.getLocation({

                    type: 'gcj02',

                    altitude:true,

                    isHighAccuracy:true,

                    success(res) {

                        // 经纬度转化地址信息

                        console.log('当前位置的经度：' + res.longitude);

                        console.log('当前位置的纬度：' + res.latitude);

                        // // 腾讯地图解析

                        // const qqmap = require('@/pages/common/wxmap/qqmap-wx-jssdk.min.js');

                        // const showmap = new qqmap({

                        //  key: 'HMUBZ-PQLEG-6I3QM-Q67MV-7FXK3-FTF6H'

                        // });

                       

                        // // 逆地址解析reverseGeocoder

                        // showmap.reverseGeocoder({

                        //  location: {

                        //      latitude: res.latitude,

                        //      longitude: res.longitude

                        //  },

                        //  success(result) {

                        //      // 地址信息

                        //      const adres = result.result.address;

                        //      that.adres = adres;

                        //      console.log(adres,"所在位置");

                        //      // 此处使用的this不是指向vc

                        //      // 所在在头部先获取到this复制给that

                        //  }

                        // });

                        // 高德地图解析

                        const amapFile = require('@/pages/common/wxmap/amap-wx.130.js') //引入高德地图 ，根据自己放置的文件路径来决定

                        const myAmapFun  = new amapFile.AMapWX({

                            key: 'c69a69ef64455e23d8c74974b15d1b3c'

                        });

                        // 调用逆地理编码方法进行地址解析

                        myAmapFun.getRegeo({

                            location: `${res.longitude},${res.latitude}`,

                            success(data) {

                            // 获取经纬度

                            const geographicLocation = this.location;

                           

                            // 解析成功，获取地址信息

                            const address = data[0].regeocodeData.formatted_address;

                            console.log('所在位置：', address);

                            // 在 `that` 对象中保存地址信息

                            that.address = address;//逆解析后的地址

                            that.geographicLocation = geographicLocation;//获取到的经纬度

                            },

                            fail() {

                            console.log('逆地理编码失败');

                            uni.showToast({

                                title: '地址获取失败',

                                duration: 2000,

                                icon: error

                            })

                            }

                        });

                   

                    },

                    fail(e) {

                        let errMsgTit = '';

                        if (e.errMsg === 'getLocation:fail auth deny') {

                            errMsgTit = '你已拒绝授权，是否跳转至设置页面开启权限';

                        } else {

                            errMsgTit = '操作频繁提示，建议搭配onLocationChange()使用';

                        }

                        uni.showModal({

                            title: '提示',

                            content: `${errMsgTit}`,

                            success(res) {

                                if (res.confirm) {

                                    // 获取设置页面权限信息

                                    uni.getSetting({

                                        success(res) {

                                            console.log(res.authSetting);

                                            // 判断是否开启获取位置权限

                                            if (!res.authSetting['scope.userLocation']) {

                                                // 如果没有开启，点击确认后打开设置页面

                                                uni.openSetting({});

                                            }

                                        }

                                    });

                                    console.log('用户点击确定');

                                } else if (res.cancel) {

                                    console.log('用户点击取消');

                                }

                            }

                        });

                    }

                });

            },

上述代码是高德地图，如果想换腾讯地图把我屏蔽的代码换一下就欧克了，

但是还是需要主要要配置key只不过是要在腾讯地图的控制台。

如果上述对各位同仁有用，拜托点个赞关注一下，后边会不定时写一些体会大家可以方便查阅。如果有啥问题可以随时扣我402047990@qq.com