大家好，又见面了，我是你们的朋友全栈君。
前言
最近遇到工作中遇到一个需求，当用户打开小程序时，小程序页面中对应的位置信息变为用户当前位置，且用户能更改当前地址信息；看到这个需求我想大部分人和我想到的就是使用微信官方API中的wx.getLocation来实现，通过它我们能拿到当前位置的经纬度，之后将经纬度转换为地址信息。
第一步:
获取当前位置的经纬度，微信官方文档中明确指出在调用wx.getLocation前是需要用户授权的，我们需要考虑到当用户拒绝授权的情况发生，因此我的做法是直接调用wx.getLocation，在失败的回调中去处理用户未授权或者拒绝的情况，代码如下：
代码语言：javascript复制// 授权获取地址信息
checkAuth(callback) {
wx.getLocation({
type: 'gcj02',
isHighAccuracy: true, // 开启高精度
success(res) {
// res 返回值 { accuracy: 65, errMsg: "getLocation:ok", horizontalAccuracy: 65, latitude: 22.53332, longitude: 113.93041, speed: -1, verticalAccuracy: 65 }
callback(res);
},
fail: function(error) {
wx.showModal({
title: '是否授权当前位置',
content: '需要获取您的地理位置，请确认授权，否则地图功能将无法使用',
success: (res) => {
if (res.confirm) {
wx.openSetting({
success: function (data) {
if (data.authSetting["scope.userLocation"]) {
wx.getLocation({
type: 'gcj02',
isHighAccuracy: true, // 开启高精度
success(res) {
// res 返回值 { accuracy: 65, errMsg: "getLocation:ok", horizontalAccuracy: 65, latitude: 22.53332, longitude: 113.93041, speed: -1, verticalAccuracy: 65 }
callback(res);
}
})
} else {
wx.showToast({
title: '授权失败',
icon: 'success',
duration: 1000
})
}
}
})
}
},
})
}
})
}注: 这里有个小坑，我之前在开发者工具上调试，拿到的经纬度去做地址逆向解析始终不对，代码查了又查，一次又一次的debugger弄了2小时都没解决，之后在开发者社区中看到网友给的说法是开发者工具中的经纬度是错的，但是手机上不会，经测试ok；在这里要感谢这位网友。
第二步:
在没有查阅相关文档之前一直以为，这类地址信息前端只需要拿到经纬度去调后端接口，后端返回前端想要的数据，地址的逆向解析是由后端来做的，也是在查阅相关文档的过程中看到了微信官方提供的解决方案，腾讯位置服务之逆地址解析
我们首先需要申请开发者秘钥，申请完成我们将得到一个key
根据官方文档我们需要下载微信小程序javascriptSDK并引入到项目中，
代码语言：javascript复制// 引入SDK核心类，js文件根据自己业务，位置可自行放置
var QQMapWX = require('../../utils/qqmap-wx-jssdk.min.js');
// 实例化API核心类
var qqmapsdk = new QQMapWX({
key: 'xxxx-xxxx-xxxx' // 这里就是申请的key
});
// 获取地址信息
getAddressInfo() {
var that = this;
var location = {
latitude: that.data.latitude,
longitude: that.data.longitude
};
qqmapsdk.reverseGeocoder({
location,
get_poi: 1, // 是否返回周边POI列表：1.返回；0不返回(默认)
poi_options: "policy=2;radius=5000",
success: res => {
var res = res.result;
that.setData({
activeAddress: res.address, // 当前经纬度解析的地址
addressList: res.pois, // 附近的地址列表信息
});
},
fail: function(error) {
console.error(error);
},
complete: function(res) {
// console.log(res);
}
})
}这里有几个坑需要注意poi_options的值中存在多个参数需要用”;”来隔开，第二个就是一定不要忘了在小程序中配置安全域名”https://apis.map.qq.com“，另外就是每个key的每个服务接口是存在限制的。
完整代码如下：
代码语言：javascript复制// 引入SDK核心类，js文件根据自己业务，位置可自行放置
var QQMapWX = require('../../utils/qqmap-wx-jssdk.min.js');
var qqmapsdk;
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
// 实例化API核心类
qqmapsdk = new QQMapWX({
key: 'xxxx-xx-xxxx-xxxx'
});
this.getAddressInfo();
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
// 授权获取地址信息
checkAuth(callback) {
wx.getLocation({
type: 'gcj02',
isHighAccuracy: true, // 开启高精度
success(res) {
callback(res);
},
fail: function() {
wx.showModal({
title: '是否授权当前位置',
content: '需要获取您的地理位置，请确认授权，否则地图功能将无法使用',
success: (res) => {
if (res.confirm) {
wx.openSetting({
success: function (data) {
if (data.authSetting["scope.userLocation"]) {
wx.getLocation({
type: 'gcj02',
isHighAccuracy: true, // 开启高精度
success(res) {
callback(res);
}
})
} else {
wx.showToast({
title: '授权失败',
icon: 'success',
duration: 1000
})
}
}
})
}
},
})
}
})
},
// 获取地址信息
getAddressInfo() {
var that = this;
that.checkAuth((res) => {
var location = {
latitude: res.latitude,
longitude: res.longitude
};
qqmapsdk.reverseGeocoder({
location: location,
get_poi: 1, // 是否返回周边POI列表：1.返回；0不返回(默认)
poi_options: "policy=2;radius=5000",
success: res => {
var res = res.result;
that.setData({
activeAddress: res.address,
addressList: res.pois
});
},
fail: function(error) {
console.error(error);
},
complete: function(res) {
// console.log(res);
}
})
})
}
})最近才发现又几年没写东西了，一直都是在忙做项目改bug，或者说是写bug
