定位Api食用方法
申请接口
微信小程序接口
地址：小程序 (qq.com)
1. 先在小程序后台，补充相关信息
2.按照以下路径找到“getLocation”接口
-
[开发] → [开发管理] → [接口设置]
-
选择“开通”，并补充相关信息，其中演示图片请准备齐全，不然会以“不充分为理由打回”
- 失败：
-
* 成功：
腾讯地图接口
地址：腾讯位置服务
1-3.相关博客地址：uni-app&微信小程序定位
- 只需要看前3步即可（1-3）
4. 额度分配
- 使用api之前，需要进行额度分配，不然会显示“此key每日调用量已达到上限
- 建议分配接口为”逆地址解析“的额度即可
配置
在使用微信小程序接口之前，需要配置以下"manifest.json"文件
"mp-weixin": {
"appid": "填入你的id",
"setting": {
"urlCheck": true,
"es6": true,
"postcss": true,
"minified": true
},
"usingComponents": true,
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于小程序提供位置相关的服务"
}
},
"requiredPrivateInfos": ["getLocation"]
},
使用
uni.request方法
- 此处调用的是微信小程序的接口，返回的数据包含腾讯地图接口所需要的”经纬度“
<script>
async getLocation() {
// 检查用户地理位置授权状态
const getSettingRes = await uni.getSetting();
const authSetting = getSettingRes.authSetting || {};
if (authSetting['scope.userLocation']) {
// 已授权，获取位置信息
uni.getLocation({
type: 'gcj02', // 使用默认坐标系统
success: (res) => {
this.latitude = res.latitude;
this.longitude = res.longitude;
this.getCityByCoordinates(this.latitude, this.longitude)
// 存储或使用位置信息
console.log('位置信息：', res);
},
fail: (err) => {
uni.showToast({
title: '位置服务不可用',
icon: 'none'
});
console.error('获取位置失败：', err);
}
});
} else {
// 未授权，请求授权
uni.authorize({
scope: 'scope.userLocation',
success: () => {
// 授权成功后，再次获取位置信息
this.getLocation();
},
fail: () => {
uni.showToast({
title: '用户拒绝授权地理位置',
icon: 'none'
});
}
});
}
},
</script>
- 此处是对上一段代码中所用到的“getCityByCoordinates”的补充，其中调用了腾讯地图的接口
<script>
async getCityByCoordinates(latitude, longitude){
uni.request({
url: 'https://apis.map.qq.com/ws/geocoder/v1/',
method: 'GET',
data: {
location: `${latitude},${longitude}`,
key: 'RKEBZ-?????-?????-?????-FL4MZ-2CFG5', // 将 'key' 替换为你的实际腾讯地图API密钥
},
success: (res) => {
// 请求成功，处理返回数据
console.log(res.data);
this.currentCity = res.data.result.address
},
fail: (err) => {
// 请求失败，处理错误信息
console.error('请求失败：', err);
},
});
}
</script>
完整例子(申请、配置好后可直接使用)
<template>
<view>
<button @tap="getLocation">获取位置</button>
<text v-if="locationInfo">您的位置：经度 {{ longitude }}, 纬度 {{ latitude }}</text>
<text>{{currentCity}}</text>
</view>
</template>
<script>
export default {
data() {
return {
currentCity: '',
longitude: 0,
latitude: 0,
};
},
methods: {
async getLocation() {
// 检查用户地理位置授权状态
const getSettingRes = await uni.getSetting();
const authSetting = getSettingRes.authSetting || {};
if (authSetting['scope.userLocation']) {
// 已授权，获取位置信息
uni.getLocation({
type: 'gcj02', // 使用默认坐标系统
success: (res) => {
this.latitude = res.latitude;
this.longitude = res.longitude;
this.getCityByCoordinates(this.latitude, this.longitude)
// 存储或使用位置信息
console.log('位置信息：', res);
},
fail: (err) => {
uni.showToast({
title: '位置服务不可用',
icon: 'none'
});
console.error('获取位置失败：', err);
}
});
} else {
// 未授权，请求授权
uni.authorize({
scope: 'scope.userLocation',
success: () => {
// 授权成功后，再次获取位置信息
this.getLocation();
},
fail: () => {
uni.showToast({
title: '用户拒绝授权地理位置',
icon: 'none'
});
}
});
}
},
async getCityByCoordinates(latitude, longitude) {
uni.request({
url: 'https://apis.map.qq.com/ws/geocoder/v1/',
method: 'GET',
data: {
location: `${latitude},${longitude}`,
key: 'RKEBZ-5MKY4-RMHUK-KU4ZP-FL4MZ-2CFG5', // 将 'mykey' 替换为你的实际腾讯地图API密钥
},
success: (res) => {
// 请求成功，处理返回数据
console.log(res.data);
this.currentCity = res.data.result.address
},
fail: (err) => {
// 请求失败，处理错误信息
console.error('请求失败：', err);
},
});
}
}
}
</script>