实战:在小程序中获取用户所在城市信息
最近在做自己的小程序《看啥好呢》,这个小程序是使用云开发的方式开发的,功能特别简单,就是获取豆瓣、大麦网的数据展示,虽然功能简单,但还是记录下开发过程和一些技术点,大约会有两篇博文产出,这是第二篇。?GitHub地址 背景在《看啥好呢》中有个本地好看 Tab,进去后会获取用户当前所在城市,然后显示该城市的数据,并且显示在导航栏和 Tab上。 微信小程序中,我们可以通过调用? 微信小程序中并没有提供这样的API,但是没关系,有? 所以整个步骤就是: wx.getLocation
reverseGeocoder(options:Object)
在小程序中获取当前的地理位置在小程序中,调用?wx.getLocation?,使用前需要用户授权? 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": {
"scope.userLocation": {
"desc": "你的位置信息将用于小程序位置接口的效果展示"
}
}
desc 用于在弹出的授权提示框中展示,如下 允许后即可获取接口返回的信息,此过程会在右上角胶囊按钮上显示箭头图标 {
accuracy: 65
errMsg: "getLocation:ok"
horizontalAccuracy: latitude: 30.25961 // 纬度,范围为 -90~90,负数表示南纬
longitude: 120.13026 // 经度,范围为 -180~180,负数表示西经
speed: -1
verticalAccuracy: 65
}
腾讯地图接口逆地址解析以腾讯地图为例,我们可以去腾讯地图开放平台注册一个账号,然后在它的管理后台创建一个密钥(key),以及进行KEY设置,按照?微信小程序JavaScript SDK?入门及使用限制文档 在 KEY设置的启用产品中,勾选 WebServiceAPI,选择签名校验方式,因为我是使用云开发的方式,所以没有什么域名也没有授权IP。 这部分代码逻辑如下 import QQMapWX from '../../scripts/qqmap-wx-jssdk.min.js'
let qqmapsdk
Page({
onLoad: function (options) {
// 实例化API核心类
qqmapsdk = new QQMapWX({
key: '开发密钥(key)' // 必填
});
this.checkAuth((latitude,longitude) => {
// https://lbs.qq.com/qqmap_wx_jssdk/method-reverseGeocoder.html
qqmapsdk.reverseGeocoder({
sig: 'KEY设置中生成的SK字符串',// 必填
location: {latitude,longitude},success(res) {
wx.setStorageSync('loca_city',res.result.ad_info.city)
},fail(err) {
console.log(err)
wx.showToast('获取城市失败')
},complete() {
// 做点什么
}
})
})
}
})
reverseGeocoder?接口返回的结果,这里面的字段比较多,详细可以看接口文档,里面好几个字段可以取到城市,其中? 全文完。 关注公众号,第一时间接收最新文章。如果对你有一点点帮助,可以点喜欢点赞点收藏,还可以小额打赏作者,以鼓励作者写出更多更好的文章。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |