微信小程序申请定位接口
在微信公众平台，开发管理 > 接口设置 申请地理位置接口
小程序项目引入腾讯位置服务 SDK
微信小程序JavaScript SDK | 腾讯位置服务 (qq.com)
- 按照上方腾讯位置服务指引，申请开发者密钥，下载SDK，将SDK文件引入到到项目中
- 在腾讯位置服务右上角 控制台 > 配额管理 > 账户额度 下，对要使用的接口进行配额分配
- 如果要调用的位置接口没有配置额度，该位置接口调用一次后，接口会报错 "此key每日调用量已达到上限"
uniapp 项目下实例demo
// manifest.json
// 配置微信小程序 requiredPrivateInfos, permission
"mp-weixin" : {
"appid" : "",
"setting" : {
"urlCheck" : false,
"es6" : true,
"minified" : true
},
"usingComponents" : true,
"lazyCodeLoading" : "requiredComponents",
"requiredPrivateInfos" : [ "getFuzzyLocation" ],
"permission" : {
"scope.userFuzzyLocation" : {
"desc" : "获取您的定位信息，为您提供附近优惠信息"
}
}
},
<script>
var QQMapWX = require("../../qqmap-wx-jssdk/qqmap-wx-jssdk.min.js");
var qqmapsdk = new QQMapWX({
key: 'Hxxxxx-xxxxxxxxxxxxxxxxxxxx-xxxxx' // 在腾讯位置服务中申请的
});
export default {
name: '',
data() {
return {}
},
onLoad(option) {
this.checkAuth()
},
methods: {
// 校验定位授权
checkAuth() {
let _this = this
// 通过 wx.getSetting 先查询一下用户是否授权了 "scope.userFuzzyLocation" 这个 scope
wx.getSetting({
success(res) {
console.log('res.authSetting', res.authSetting)
if (!res.authSetting['scope.userFuzzyLocation']) {
wx.authorize({
scope: 'scope.userFuzzyLocation',
success() {
// 用户已经同意小程序使用定位功能，后续调用接口不会弹窗询问
// 获取位置信息
_this.getFuzzyLocation()
},
fail(err) {
wx.showModal({
title: '提示',
content: '获取地理位置失败！请前往“设置”打开定位权限。',
success(res) {
if (res.confirm) {
console.log('用户点击确定')
wx.openSetting({
success: (res) => {
console.log(res)
},
})
} else if (res.cancel) {
console.log('用户点击取消')
}
},
})
}
})
} else {
_this.getFuzzyLocation()
}
}
})
},
// 获取位置
getFuzzyLocation() {
let _this = this
wx.getFuzzyLocation({
type: 'wgs84',
success(res) {
console.log(99999, res.latitude, res.longitude)
// 调用腾讯位置服务，逆地址解析，输入坐标返回地理位置信息和附近poi列表。
qqmapsdk.reverseGeocoder({
location: {
latitude: res.latitude,
longitude: res.longitude
},
success(res) {
console.log('城市信息', res.result.ad_info.city, res.result.ad_info.adcode)
// 成功获取定位信息
// 添加后续回调函数
_this.callback()
},
fail(err) {
console.log(err)
wx.showModal({
content: err.message,
showCancel: false,
});
},
complete(res) {}
})
},
fail: () => {
},
})
},
callback(res) {
console.log('获取了位置信息，后续...' res)
},
}
}
</script>
