【微信小程序腾讯位置服务】获取用户所在城市信息实战
背景
实现小程序进去后获取用户当前所在城市,然后显示该城市的数据,并且显示在导航栏和 Tab上。
微信小程序中,我们可以通过调用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)}})}})}}})
}
其中type
的取值可以为:
wgs84
意思返回 gps 坐标gcj02
返回可用于wx.openLocation
的坐标
运行后会提示如下信息,还需要在 app.json 中配置permission字段
查询文档后得知,得知需要如下配置
"permission": {"scope.userLocation": {"desc": "你的位置信息将用于小程序位置接口的效果展示"}
}
desc 用于在弹出的授权提示框中展示,如下
允许后即可获取接口返回的信息,此过程会在右上角胶囊按钮上显示箭头图标
{accuracy: 65errMsg: "getLocation:ok"horizontalAccuracy: 65latitude: 30.25961 // 纬度,范围为 -90~90,负数表示南纬longitude: 120.13026 // 经度,范围为 -180~180,负数表示西经speed: \-1verticalAccuracy: 65
}
latitude
和longitude
即是我们需要的两个字段
腾讯地图接口逆地址解析
以腾讯地图为例,我们可以去腾讯地图开放平台注册一个账号,然后在它的管理后台创建一个密钥(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.htmlqqmapsdk.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
接口返回的结果,这里面的字段比较多,详细可以看接口文档,里面好几个字段可以取到城市,其中ad_info
是行政区划信息,我就取这里面的city
了。
以上内容转载自面糊的文章《【实战】小程序中结合腾讯地图获取用户所在城市信息》
链接:https://segmentfault.com/a/1190000021318458#comment-area
来源:segmentfault
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
【微信小程序腾讯位置服务】获取用户所在城市信息实战相关推荐
- 微信小程序结合腾讯位置服务获取用户所在城市信息
背景 实现小程序进去后获取用户当前所在城市,然后显示该城市的数据,并且显示在导航栏和 Tab上. 微信小程序中,我们可以通过调用wx.getLocation()获取到设备当前的地理位置信息,这个信息是 ...
- 微信小程序使用腾讯位置服务地图选点实现地址的选取|微信小程序腾讯位置服务地图选点请求来源未被授权
效果图 首先要在微信开放平台的小程序里 添加插件 具体配置,可以参考官方文档 腾讯位置服务地图选点 | 小程序插件 | 微信公众平台 (qq.com) 同时还要申请接口的权限,不然小程序上线的时候不能 ...
- 微信小程序腾讯位置服务城市选择器
腾讯城市选择器插件微信小程序插件 | 腾讯位置服务 先看文档,下面为操作步骤 1.登录 微信公众平台 设置 - 第三方设置 - 插件管理 - 添加插件 - 搜索腾讯位置服务城市选择器 - 添加 2.注 ...
- 微信小程序 腾讯位置服务地图选点和路线规划
微信小程序使用 腾讯位置服务插件 实现 地图选点和路线规划 效果图: 实现过程 点击"开发指南",根据对应打开网页中的接入指引进行开发实现. 腾讯位置服务地图选点:开发指南 腾讯位 ...
- 微信小程序 ‘腾讯位置服务地图选点插件申请失败’
1.登录微信公众平台 2.登录后设置-第三方设置-插件管理-添加插件 3.微信小程序插件 | 腾讯位置服务 将官网上的 配置值复制到app.json中,切记是官网上的值不是自己生成的值!!!!然后再进 ...
- 在微信小程序中,如果自动获取用户所在的省市地区?
可以通过微信小程序提供的API获取用户所在的省市地区信息.具体步骤如下: 在小程序中需要获取用户地理位置时,需要先在app.json中配置"permission"字段,并开启用户授 ...
- uni-app开发微信小程使用腾讯位置服务获取用户的位置信息
uni-app开发微信小程使用腾讯位置服务获取用户的位置信息 一.开通腾讯位置服务 二.编码实现 (一)获取定位坐标 (二).在项目中使用 一.开通腾讯位置服务 在这里我们先要登录腾讯我i之服务的官网 ...
- 微信小程序开发——点击按钮获取用户授权没反应或反应很慢的解决方法
微信小程序开发--点击按钮获取用户授权没反应或反应很慢的解决方法 参考文章: (1)微信小程序开发--点击按钮获取用户授权没反应或反应很慢的解决方法 (2)https://www.cnblogs.co ...
- 小程序腾讯位置服务路线规划插件申请方法
如果用以下常规的方法个人小程序大概率是通过不了的 在腾讯微信公众平台中, "微信小程序官方后台-设置-第三方服务-插件管理" 里点击 "添加插件",搜索 &qu ...
最新文章
- 蚁群算法优化神经网络matlab源程序,粒子群优化神经网络的程序大集合
- KMP算法~看的清楚~
- 中国数学竞赛史上最玩命的“赌徒”,为了国家荣誉,他不惜用生命换来了五次世界第一...
- 局域网网管软件_网管软件有哪些?那些不同之处
- oracle一般人能不能学,Oracle人门学习笔记
- LeetCode数据库 176. 第二高的薪水
- mac上远程连接windows
- 国密SM4对称算法实现说明(原SMS4无线局域网算法标准)
- AcheGesture 简介(使用方法 / 中文教程)
- 手机号获取验证码进行登录注册
- 智慧公交可视化大屏决策管理系统改善城市交通
- 基于机器学习与深度学习的金融风控贷款违约预测
- Catching Cheaters
- 线条边框简笔画图片大全_每天学一幅简笔画生活小物简笔画图片大全!
- 使用 APlayer 实现音乐播放器
- linux环境安全配置,Linux系统安全配置方案
- Compose搭档 — Flow、Room
- stable_sort的用法与排序算法
- 管理上的心得分享(一)
- win7修复计算机消失,win7旗舰版系统重装后本地连接不见的恢复方法
热门文章
- python文本操作—读、写
- Tribon图纸中Symbols符号的解析
- planner_wisdom(),fftw_wisdom_lookup(),fftw_measure_runtime(),init_test_array()函数代码分析
- 5.设计模式之模板方法
- 注册表 Run、RunOnce 浅析
- 同相比造句_对比造句_造句大全
- 微软改名部又出手:Office 365正在悄悄更名为Microsoft 365
- 排序之选择排序(图解)
- 0x12软考|网络工程师经验分享之下一代互联网(IPv6)
- 无线接收器能连服务器吗,自制无线接收器 你会设置无线接收器吗?