微信小程序获取用户地理定位

1.需要在微信公众平台上申请相关定位权限信息才可以使用

2.在permission中配置相关信息

3.封装getLocation 函数,首次进入小程序需要申请用户权限信息,如果用户同意获取用户经纬度,如果用户拒绝,那么在用户下次进入时在次向用户发起申请权限信息,然后利用在腾讯地图申请的实例,来进行地理逆解析,显示用户位置,需要在微信公众平台域名信息中配置https://apis.map.qq.com,这里我们使用的类型是 gcj02 坐标,然后去请求https://apis.map.qq.com/ws/geocoder/v1/?location=${latitude},${longitude}&key=XXXXXXXXXXXXXXXXXXX&get_poi=1`

在返回的信息中就可以拿到精确定位信息

4.我们就在需要的地方使用

// 然后在需要的地方调用getUserLocation 函数
const getUserLocation = () => {
		getLocation()
			.then(address => {
				location.value = address;
			})
			.catch(error => {
				location.value = '获取地理位置失败';
			});
	}

const getLocation = () => {
    return new Promise((resolve, reject) => {
        checkAuthorization()
            .then(() => requestLocation(resolve, reject))
            .catch(error => reject(error));
    });
};

const checkAuthorization = () => {
    return new Promise((resolve, reject) => {
        wx.getSetting({
            success(res) {
                if (res.authSetting['scope.userLocation']) {
                    resolve();
                } else {
                    requestAuthorization(resolve, reject);
                }
            },
            fail(err) {
                reject(err);
            }
        });
    });
};

const requestAuthorization = (resolve, reject) => {
    wx.authorize({
        scope: 'scope.userLocation',
        success() {
            resolve();
        },
        fail() {
            promptUserForAuthorization(resolve, reject);
        }
    });
};

const promptUserForAuthorization = (resolve, reject) => {
    wx.showModal({
        title: '提示',
        content: '您需要授权地理位置信息才能使用此功能。',
        confirmText: '去授权',
        cancelText: '取消',
        success(res) {
            if (res.confirm) {
                wx.openSetting({
                    success(settingRes) {
                        if (settingRes.authSetting['scope.userLocation']) {
                            resolve();
                        } else {
                            reject('用户拒绝授权');
                        }
                    },
                    fail(err) {
                        reject(err);
                    }
                });
            } else if (res.cancel) {
                reject('用户取消授权');
            }
        }
    });
};

const requestLocation = (resolve, reject) => {
    wx.getLocation({
        type: 'gcj02',
        success(locationRes) {
            handleLocation(locationRes, resolve, reject);
        },
        fail(err) {
            reject(err);
        }
    });
};

const handleLocation = (locationRes, resolve, reject) => {
    const { latitude, longitude } = locationRes;
    wx.request({
        url: `https://apis.map.qq.com/ws/geocoder/v1/?location=${latitude},${longitude}&key=EKWBZ-UCKCC-2RA26-ABRH5-K7SEZ-W6FEM&get_poi=1`,
        success(response) {
            const address = response.data.result.pois[0].title;
            resolve(address);
        },
        fail(err) {
            reject(err);
        }
    });
};

export { getLocation };

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值