微信小程序中获取用户所在城市信息
最近在做一个小程序，进入同城页面自动获取用户所在城市信息，然后显示当前城市的数据列表
原理
微信小程序中，我们可以通过调用 wx.getLocation() 获取到设备当前的地理位置信息，这个信息是当前位置的经纬度。如果我们想获取当前位置是处于哪个国家，哪个城市等信息，该如何实现呢？
微信小程序中并没有提供这样的 API，但是没关系，有 wx.getLocation() 得到的经纬度作为基础就够了，其他的，我们可以使用其他第三方地图服务可以来实现，比如腾讯地图或百度地图的 API。
所以可以分为两个步骤：
- 在小程序中获取当前的地理位置，涉及小程序 API 为 wx.getLocation
- 把第 1 步中获得的经纬度信息通过腾讯地图的接口逆地址解析，涉及腾讯地图接口为 reverseGeocoder(options:Object)
小程序获取当前的地理位置
在小程序中，调用 wx.getLocation，使用前需要用户授权 scope.userLocation，代码如下：
checkAuth(callback) {
wx.getSetting({
success(res) {
if (!res.authSetting['scope.userLocation']) {
wx.authorize({
scope: 'scope.userLocation',
success() {
wx.getLocation({
type: 'wgs84',
success(res) {
callback(res.latitude, res.longitude)
}
})
}
})
}
}
})
}
运行后会提示如下信息，还需要在 app.json 中配置 permission 字段
在 app.json 中添加配置：
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于小程序城市显示"
}
}
允许后即可获取接口返回的信息:
{
accuracy: 65;
errMsg: "getLocation:ok";
horizontalAccuracy: 65;
latitude: 30.25961; // 纬度，范围为 -90~90，负数表示南纬
longitude: 116.13026; // 经度，范围为 -180~180，负数表示西经
speed: -1;
verticalAccuracy: 65;
}
latitude 和 longitude 即是我们需要的两个字段
腾讯地图接口逆地址解析
我们可以在腾讯地图创建一个应用，并添加密钥 key ，以及进行 key 设置，按照 微信小程序 JavaScript SDK 入门及使用限制文档
在 KEY 设置的启用产品中，勾选 WebServiceAPI，选择签名校验方式
这部分代码逻辑如下:
qqmapsdk = new QQMapWX({
key: 'IZ6BZ-M4K6W-EG5RE-RVHVF-655PE-N6FCK'
});
wx.getLocation({
success(res) {
var latitude = res.latitude
var longitude = res.longitude
qqmapsdk.reverseGeocoder({
sig: 'OoBrEnhmm0t3jkdBINR1luDSMLoyrhD',
location: {
latitude,
longitude
},
success(res) {
console.log(res)
var regVal = []
regVal.push(res.result.ad_info.province)
regVal.push(res.result.ad_info.city)
regVal.push(res.result.ad_info.district)
that.setData({
region: regVal
})
wx.setStorageSync('loca_city', regVal)
},
fail(err) {
console.log(err)
},
complete() {
that.loadCityInfo();
}
})
}
})
reverseGeocoder 接口返回的结果，这里面的字段比较多，详细可以看接口文档，里面好几个字段可以取到城市相关信息，其中 ad_info 是行政区划信息，我就取这里面取相关信息。
