微信小程序结合腾讯地图获取用户所在城市信息
背景
实现小程序进去后会获取用户当前所在城市,然后显示该城市的数据,并且显示在导航栏和 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: 65
errMsg: "getLocation:ok"
horizontalAccuracy: 65
latitude: 30.25961 // 纬度,范围为 -90~90,负数表示南纬
longitude: 120.13026 // 经度,范围为 -180~180,负数表示西经
speed: -1
verticalAccuracy: 65
}
latitude
和longitude
即是我们需要的两个字段腾讯地图接口逆地址解析以腾讯地图为例,我们可以去腾讯地图开放平台注册一个账号,然后在它的管理后台创建一个密钥(key),以及进行KEY设置,按照微信小程序JavaScript SDK入门及使用限制文档
这部分代码逻辑如下
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
接口返回的结果,这里面的字段比较多,详细可以看接口文档,里面好几个字段可以取到城市,其中ad_info
是行政区划信息,我就取这里面的city
了。
以上内容转载自面糊的文章《【实战】小程序中结合腾讯地图获取用户所在城市信息》
链接:https://segmentfault.com/a/1190000021318458#comment-area
来源:segmentfault
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- android popupwindow用法详解
- SpringAOP + 注解实现日志管理
- 删除一个表中所有含重复字段的数据
- stm32mp157开发板常用系统工具使用
- android实现筛选菜单效果
- AppCMS注入及评论xss漏洞
- css属性为 { flex: 1 }时表示的意思
- Android studio 实现手机扫描二维码功能
- Nginx 平滑升级与回滚
- Android实现通用筛选栏
- Android实现关机后数据不会丢失问题
- Canvas 进阶(五)实现图片滤镜效果
- 将IP地址字符串分割成数组
- android监听器实例代码
- (火狐)Selenium WebDriver测试 NotADirectoryError: [WinError 267] 目录名称无效。