一、获取长短坐标
1.首先要去微信公众平台更新隐私协议，不然无法通过uni.getLocation获取长短坐标，协议更新审核完再次进入小程序会弹出位置授权
2.在manifest.json中更新授权信息和接口
"mp-weixin": {
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于小程序位置接口的效果展示"
},
"scope.userFuzzyLocation": {
"desc": "你的位置信息将用于小程序位置接口的效果展示"
}
},
"requiredPrivateInfos": ["chooseAddress","chooseLocation","getLocation"]
}, 3.通过uni.getLocation获取坐标
3.1.首先通过uni.authorize判断是否授权，未授权需要再次授权
3.2.使用国测局坐标gcj02获取ip所在地
getLocation() {
//验证是否有授权
console.log("开始获取授权")
const that = this
uni.authorize({
scope: 'scope.userLocation', // 获取地理信息必填的参数，其它参数见文档
success(res) {
that.getLocationFn()
},
// 授权失败
fail(err) {
uni.showModal({
title: '温馨提示',
content: '此功能需要授权后使用!',
confirmText: '前去授权',
success: (res) => {
if (res.confirm) {
uni.openSetting({
success: (res) => {
console.log(res);
that.getLocationFn()
}
})
} else {
console.log('取消');
return false;
}
}
})
return false;
}
})
},
getLocationFn() {
const that = this
console.log("获取地址了")
uni.getLocation({
type: 'gcj02', // <map> 组件默认为国测局坐标gcj02
altitude: true,
success(res) {
// console.log('返回的位置信息', res)
that.latitude = res.latitude
that.longitude = res.longitude
console.log(that.latitude + "," + that.longitude)
that.getAddress()
},
fail(res) {
console.log('失败原因', res)
}
})
},二、使用腾讯地图api坐标逆解析
- 申请开发者密钥（key）：申请密钥
开通webserviceAPI服务：控制台 ->应用管理 -> 我的应用 ->添加key-> 勾选WebServiceAPI -> 保存
(小程序SDK需要用到webserviceAPI的部分服务，所以使用该功能的KEY需要具备相应的权限)
- 下载微信小程序JavaScriptSDK，微信小程序JavaScriptSDK v1.1 JavaScriptSDK v1.2
- 安全域名设置，在小程序管理后台 -> 开发 -> 开发管理 -> 开发设置 -> “服务器域名” 中设置request合法域名，添加https://apis.map.qq.com
三、完整代码示例
注2：官方和网上搜到的案例里都说把sdk放在onload中，实际操作后发现放在onload里面会导致出现reverseGeocoder方法找不到，直接放在请求上方更好
import QQMapWX from '@/common/qqmap-wx-jssdk.min.js'
let qqmapsdk;
export default {
data() {
return {
latitude: 0,
longitude: 0
};
},
onLoad() {
// qqmapsdk = new QQMapWX({
// key: '你的KEY'
// });
// this.getLocation()
},
mounted() {
this.getLocation()
},
methods: {
getLocation() {
//验证是否有授权
console.log("开始获取授权")
const that = this
uni.authorize({
scope: 'scope.userLocation', // 获取地理信息必填的参数，其它参数见文档
success(res) {
that.getLocationFn()
},
// 授权失败
fail(err) {
uni.showModal({
title: '温馨提示',
content: '此功能需要授权后使用!',
confirmText: '前去授权',
success: (res) => {
if (res.confirm) {
uni.openSetting({
success: (res) => {
console.log(res);
that.getLocationFn()
}
})
} else {
console.log('取消');
return false;
}
}
})
return false;
}
})
},
getLocationFn() {
const that = this
console.log("获取地址了")
uni.getLocation({
type: 'gcj02', // <map> 组件默认为国测局坐标gcj02
altitude: true,
success(res) {
// console.log('返回的位置信息', res)
that.latitude = res.latitude
that.longitude = res.longitude
console.log(that.latitude + "," + that.longitude)
that.getAddress()
},
fail(res) {
console.log('失败原因', res)
}
})
},
getAddress() {
console.log("获取城市")
qqmapsdk = new QQMapWX({
key: '你的KEY'
});
qqmapsdk.reverseGeocoder({
//必须要有这个，获取方式为选择WebServiceAPI后签名校验
sig:'你的SDK',
location: {
latitude: this.latitude,
longitude: this.longitude
},
success(res) {
console.log(res.result.address_component.city)
},
fail: (error) => {
console.error(error);
}
})
},
