点餐小程序实战教程18获取用户的所在城市

news/2024/10/10 2:09:22/

1 集成高德地图

腾讯地图已经不给个人开发者额度了，那我们就没法进行测试开发。那就切换一个地图组件，这篇教程我们切换成高德地图

打开高德地图的控制台，添加Key
在这里插入图片描述
选择web服务

2 逆地址解析

我们在小程序可以通过getLocation接口获取用户的当前位置信息，得到的是经纬度，可以通过调用逆地址解析接口获取所在的城市信息

打开APIs，创建一个逆地址解析的方法，类型选择http请求
在这里插入图片描述
输入如下的URL

https://restapi.amap.com/v3/geocode/regeo?parameters

方法选择get，添加两个入参，key和location
在这里插入图片描述
在Query添加Key，value从入参里选择

点击方法测试，传入正确的参数就可以看到返回结果，点击出参自动映射

在调试的时候注意是三位数在前，两位数在后

3 小程序启动时候获取位置

我们小程序一启动的时候我们就获取一下位置信息，需要获取位置信息的，首先要打开授权。点击编辑器底部的代码编辑器
在这里插入图片描述
在mp config里打开配置，贴入如下配置

export default {appJson: {// 小程序接口权限相关设置，可选permission: {'scope.userLocation': {desc: '你的位置信息将用于小程序位置接口的效果展示',},}, },
}

在这里插入图片描述

在lifecycle里贴入如下代码

export default {onAppLaunch(launchOpts) {//console.log('---------> LifeCycle onAppLaunch', launchOpts)wx.getLocation({type: 'wgs84',async success(res) {const latitude = res.latitudeconst longitude = res.longitudeconst speed = res.speedconst accuracy = res.accuracyconsole.log(latitude, longitude)// 调用高德地图APIconst result = await $w.cloud.callDataSource({dataSourceName: 'ctgl_jb3folg',methodName: 'regeo',params: {key:"154efad",location:  longitude+ ',' + latitude} // 方法入参});$w.app.dataset.state.city = result.regeocode.addressComponent.city}})},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)}
}