实战：在小程序中获取用户所在城市信息

最近在作本身的小程序《看啥好呢》，这个小程序是使用云开发的方式开发的，功能特别简单，就是获取豆瓣、大麦网的数据展现，虽然功能简单，但仍是记录下开发过程和一些技术点，大约会有两篇博文产出，这是第二篇。GitHub地址

背景

在《看啥好呢》中有个本地好看 Tab，进去后会获取用户当前所在城市，而后显示该城市的数据，而且显示在导航栏和 Tab上。

微信小程序中，咱们能够经过调用wx.getLocation()获取到设备当前的地理位置信息，这个信息是当前位置的经纬度。若是咱们想获取当前位置是处于哪一个国家，哪一个城市等信息，该如何实现呢？

微信小程序中并无提供这样的API，可是不要紧，有wx.getLocation()获得的经纬度做为基础就够了，其余的，咱们可使用其余第三方地图服务能够来实现，好比腾讯地图或百度地图的API。

因此整个步骤就是：

1. 在小程序中获取当前的地理位置，涉及小程序API为wx.getLocation
2. 把第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入门及使用限制文档

在 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接口返回的结果，这里面的字段比较多，详细能够看接口文档，里面好几个字段能够取到城市，其中ad_info是行政区划信息，我就取这里面的city了。

全文完。

---

关注公众号，第一时间接收最新文章。若是对你有一点点帮助，能够点喜欢点赞点收藏，还能够小额打赏做者，以鼓励做者写出更多更好的文章。