【小程序】 腾讯地图获取地理位置的封装（包括拒绝授权）

方式一，新建userLocation.js，封装直接获取(包括拒绝授权)

function userLocation() {
    
    
	return new Promise((resolve, reject) => {
    
    
		uni.getSetting({
    
    
			success(res) {
    
    
				// console.log(res)
				// 如果没有授权
				if (!res.authSetting['scope.userLocation']) {
    
    
					// 则拉起授权窗口
					uni.authorize({
    
    
						scope: 'scope.userLocation',
						success() {
    
    
							//点击允许后--就一直会进入成功授权的回调 就可以使用获取的方法了
							uni.getLocation({
    
    
								type: 'gcj02',
								geocode: true,
								success: function(res1) {
    
    
									// console.log('当前位置的经度：' + res1.longitude);
									console.log('当前位置的纬度：' + res1.latitude);
									uni.setStorageSync("lng", res1.longitude)
									uni.setStorageSync("lat", res1.latitude)
									uni.request({
    
      // 根据需求使用 也可直接 resolve(res1)
										url: 'https://apis.map.qq.com/ws/geocoder/v1/', // 你地址解析
									 	method: 'GET',
										data: {
    
    
									 		location: res1.latitude + ',' + res1.longitude,
									 		key: '腾讯地图的key'
									 	},
									 	success: (res1) => {
    
    
									 		console.log(res1,"地理信息")
									 		resolve(res1.data.result.address_component)
									 	},fail(err) {
    
    
									 		console.log(err,"失败信息")
									 	}
									 });
								},
								fail(error) {
    
    
									reject('获取失败')
									console.log('失败', error)
								}
							})
						},
						fail(error) {
    
    
							//点击了拒绝授权后--就一直会进入失败回调函数--此时就可以在这里重新拉起授权窗口
							console.log('拒绝授权', error)

							uni.showModal({
    
    
								title: '提示',
								content: '若点击不授权，将无法使用位置功能',
								cancelText: '不授权',
								cancelColor: '#999',
								confirmText: '授权',
								confirmColor: '#f94218',
								// showCancel: false,
								success(res) {
    
    
									console.log(res)
									if (res.confirm) {
    
    
										// 选择弹框内授权
										uni.openSetting({
    
    
											success(res) {
    
    
												console.log(res.authSetting)
											}
										})
									} else if (res.cancel) {
    
    
										reject('获取失败')
										// 选择弹框内 不授权
										console.log('用户点击不授权')
									}
								}
							})
						}
					})
				} else {
    
    
					// 有权限则直接获取
					uni.getLocation({
    
    
						type: 'gcj02',
						geocode: true,
						success: function(res1) {
    
    
							uni.request({
    
    
								url: 'https://apis.map.qq.com/ws/geocoder/v1/', // 你地址解析
								method: 'GET',
								data: {
    
    
									location: res1.latitude + ',' + res1.longitude,
									key: '腾讯地图的key'
								},
								success: (res1) => {
    
    
									resolve(res1.data.result.address_component
										.city)
								}
							});
						},
						fail(error) {
    
    
							uni.showToast({
    
    
								title: '请勿频繁调用！',
								icon: 'none',
							})
							reject('获取失败')
							console.log('失败', error)
						}
					})
				}
			}
		})
	})

}
export default {
    
    
	userLocation
}

页面调用

import userlogin from "@/config/userLocation.js"

userlogin.userLocation()

方式二，新建getAddress.js，封装获取

步骤一：导入腾讯地图的sdk

获取sdk

• 失败请去官网查找sdk

解压后放置在项目中

新建getAddress.js

/**
 * 腾讯地图 微信小程序JS API
 * https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview
 */
import QQMapWX from '@/config/qqmap-wx-jssdk.js';

// 申请开发者密钥（key）
const QQMAP_KEY = 'xxxxxx';

const qqmapsdk = new QQMapWX({
    
    
	key: QQMAP_KEY,
});

/**
 * 逆地址解析(坐标位置描述)
 * options: {location: {latitude: 纬度, longitude: 经度}}
 */
export function reverseGeocoder(options) {
    
    
	return new Promise((resolve, reject) => {
    
    
		qqmapsdk.reverseGeocoder({
    
    
			...options,
			success: resolve,
			fail: reject,
		});
	});
}

使用页面调用

import {
    
    reverseGeocoder} from '@/components/getMap.js';

data() {
    
    
		return {
    
    
			Address: "",
		};
	},
methods: {
    
    
	async getaddress1() {
    
    
			let that = this
			// 1、通过微信小程序获取当前位置坐标，需要用户点击授权按钮
			const locationRes = await uni.getLocation({
    
    
				type: 'wgs84',
			});
			if (locationRes[1].errMsg == 'getLocation:ok') {
    
    
				// 2、根据坐标获取位置的详细信息
				const reverseRes = await reverseGeocoder({
    
    
					location: {
    
    
						latitude: locationRes[1].latitude,
						longitude: locationRes[1].longitude,
					}
				});
					that.Address = reverseRes.result.address_component.district
			}
		},
	},
	onLoad(){
    
    
		this.getaddress1()
	},