关于腾讯地图:微信小程序结合腾讯地图获取用户所在城市信息

42次阅读

共计 1938 个字符，预计需要花费 5 分钟才能阅读完成。

实现小程序进去后会获取用户以后所在城市，而后显示该城市的数据，并且显示在导航栏和 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 入门及应用限度文档

在 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 了。