在我们的实例宠物小程序中，一进入小程序需要获取当前用户的所在城市，并且显示城市名称。微信小程序api有获取当前位置信息的getLocation。但是这个api只能返回当前用户的经纬度信息，不能直接获取所在城市。要想获取城市信息需要借助连接器的功能，我们本篇就介绍一下如何获取城市信息。
1 获取用户经纬度信息
我们的需求是一登录小程序就要拿到位置信息，那必须是要在小程序的生命周期函数里取获取。因此我们需要在小程序的appLanch里拿位置信息。登录低码控制台，点击左上角的菜单栏，点击低代码编辑器
我们需要访问小程序的api，api里调用的示例代码
wx.getLocation({
type: 'wgs84',
success (res) {
const latitude = res.latitude
const longitude = res.longitude
const speed = res.speed
const accuracy = res.accuracy
}
})
可以将这段代码贴入我们的生命周期函数中
export default {
async onAppLaunch(launchOpts) {
//console.log('---------> LifeCycle onAppLaunch', launchOpts)
const {
OPENID, FROM_OPENID } = await app.utils.getWXContext()
let userId = FROM_OPENID || OPENID
if (!userId) {
const {
wedaId } = await app.cloud.getUserInfo()
userId = wedaId
}
app.dataset.state.openid = userId
console.log("openid", app.dataset.state.openid)
wx.getLocation({
type: 'wgs84',
success(res) {
const latitude = res.latitude
const longitude = res.longitude
const speed = res.speed
const accuracy = res.accuracy
console.log(latitude,longitude)
}
})
},
onAppShow(appShowOpts) {
//console.log('---------> LifeCycle onAppShow', appShowOpts)
},
onAppHide() {
//console.log('---------> LifeCycle onAppHide')
},
onAppError(options) {
//console.log('---------> LifeCycle onAppError', options)
},
onAppPageNotFound(options) {
//console.log('---------> LifeCycle onAppPageNotFound', options)
},
onAppUnhandledRejection(options) {
//console.log('---------> LifeCycle onAppUnhandledRejection', options)
}
}
点开开发调试工具，发现在编辑器里无法拿到位置信息
一般wx.的语法是不能在浏览器里直接调试的，我们需要发布成小程序在手机上查看。在手机上查看发现无法获取位置信息
要想获取用户的位置信息，首先需要获取用户的授权。授权的话需要在低代码编辑器里的common目录mp config将地图的授权信息注释打开
export default {
appJson: {
// 小程序接口权限相关设置，可选
permission: {
'scope.userLocation': {
desc: '你的位置信息将用于小程序位置接口的效果展示',
},
},
},
}
再次发布小程序后，会提示获取用户的位置信息，点击确定即可
再次打开控制台，可以看到经纬度信息就有了
2 创建连接器
有了经纬度信息，之后我们要根据经纬度信息解析出地址来，就需要创建一个地图连接器。在控制台中点击连接器，点击新建连接器
选择腾讯地图
新建连接器的时候需要填入api key，这个key需要进入到腾讯地图进行创建
登录腾讯地图后需要点击控制台
在我的应用里完成应用的创建，并将获取到的api key贴入连接器中，完成连接器的创建
连接器创建好之后就可以看到连接器各种可以使用的方法
我们这里用到了坐标位置描述这个接口，我们看一下官方接口的文档
https://lbs.qq.com/service/webService/webServiceGuide/webServiceGcoder
然后改造一下我们的代码，改造成如下
export default {
async onAppLaunch(launchOpts) {
//console.log('---------> LifeCycle onAppLaunch', launchOpts)
const {
OPENID, FROM_OPENID } = await app.utils.getWXContext()
let userId = FROM_OPENID || OPENID
if (!userId) {
const {
wedaId } = await app.cloud.getUserInfo()
userId = wedaId
}
//userId = "o29js5TnCwiYJayG9AieKzkIlOBg"
app.dataset.state.openid = userId
console.log("openid", app.dataset.state.openid)
wx.getLocation({
type: 'wgs84',
async success(res) {
const latitude = res.latitude
const longitude = res.longitude
const speed = res.speed
const accuracy = res.accuracy
const result = await app.cloud.callConnector({
name: 'txdt_32els26',
methodName: 'coord2label',
params: {
location: latitude + ',' + longitude
} // 方法入参
});
console.log(result)
app.dataset.state.city = result.result.address_component.city
}
})
//console.log(latitude,longitude)
},
onAppShow(appShowOpts) {
//console.log('---------> LifeCycle onAppShow', appShowOpts)
},
onAppHide() {
//console.log('---------> LifeCycle onAppHide')
},
onAppError(options) {
//console.log('---------> LifeCycle onAppError', options)
},
onAppPageNotFound(options) {
//console.log('---------> LifeCycle onAppPageNotFound', options)
},
onAppUnhandledRejection(options) {
//console.log('---------> LifeCycle onAppUnhandledRejection', options)
}
}
我们先通过getLocation获取到经纬度信息，然后再将结果作为参数传入到连接器的方法中，这样就获取到了城市信息。接着将城市信息赋值给全局变量，这样就拿到了当前所在的城市信息。如果需要获取其他信息可以参考官方文档的返回结果。
总结
我们本篇介绍了如果根据用户的经纬度获取城市信息，这个功能还是非常有用的。尤其你要做城市切换的时候总是先要显示当前城市的数据，然后再由用户自主的切换城市。