方式一,新建userLocation.js,封装直接获取(包括拒绝授权)
function userLocation() {
return new Promise((resolve, reject) => {
uni.getSetting({
success(res) {
if (!res.authSetting['scope.userLocation']) {
uni.authorize({
scope: 'scope.userLocation',
success() {
uni.getLocation({
type: 'gcj02',
geocode: true,
success: function(res1) {
console.log('当前位置的纬度:' + res1.latitude);
uni.setStorageSync("lng", res1.longitude)
uni.setStorageSync("lat", res1.latitude)
uni.request({
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',
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
解压后放置在项目中
新建getAddress.js
import QQMapWX from '@/config/qqmap-wx-jssdk.js';
const QQMAP_KEY = 'xxxxxx';
const qqmapsdk = new QQMapWX({
key: QQMAP_KEY,
});
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
const locationRes = await uni.getLocation({
type: 'wgs84',
});
if (locationRes[1].errMsg == 'getLocation:ok') {
const reverseRes = await reverseGeocoder({
location: {
latitude: locationRes[1].latitude,
longitude: locationRes[1].longitude,
}
});
that.Address = reverseRes.result.address_component.district
}
},
},
onLoad(){
this.getaddress1()
},