# 实战篇 4：天气页面数据获取和交互实现

天气预报页面主要有两个重要的流程：获取地理位置和获取天气数据。本节重点介绍这两部分的代码实现。

# 定位和逆地址查询

获取地理位置功能可以拆成两个步骤：

1. 使用微信 wx.getLocation 方法获取用户当前位置的经纬度
2. 使用拿到的经纬度请求腾讯地图的逆地址解析接口，获取省市县和详细地址

下面来逐一介绍。

# 获取用户当前位置经纬度

小程序可以使用 wx.getLocation 方法获取用户的当前位置经纬度。wx.getLocation 默认获取的是 wgs84 坐标系，即 GPS 的坐标系，而国内地图（除百度地图外）一般用的都是 GCJ02（国测局坐标，又称为“火星坐标系”）的坐标系，所以需要传入 type 来指定坐标系统。

wx.getLocation({
  type: 'gcj02',
  success: this.updateLocation,
  fail: (e) => {
    // console.log(e)
    this.openLocation()
  }
})

Tips： 出于国家安全考虑，国内使用的坐标系都是经过国测局统一加密偏移后的坐标，所以我们拿到的坐标并不是真正的坐标，国测局统一加密后的坐标系就是 GCJ02。国测局规定：国内地图产品需要用 GCJ02 的坐标系，或者在 GCJ02 基础上再次加密的坐标系，百度自有的 BD09 坐标系就是在 GCJ02 基础上再次加密的坐标系。

GPS 定位拿到的是 WGS84 坐标系，直接在国内地图上使用或者调用国内地图的位置 API 服务都会计算有偏移。因为我们实战中用的逆地址解码服务是腾讯地图服务，腾讯地图的坐标系是 GCJ02，所以 wx.getLocation 的参数 type 应该是 gcj02，而不是默认的 wgs84。如果调用 wx.getLocation 不传入 type 则获取的 wgs84 坐标会有偏移。同理，使用 wx.openLocation 也要注意坐标系问题。

# 根据经纬度获取当前地址

wx.getLocation 方法返回有当前用户的经纬度，具体返回的数据有：

经纬度信息要转化成具体的地理位置，需要使用地图的逆地址查询接口，笔者在这里使用了腾讯地图的 API。

首先在腾讯地图开放平台注册账号，注册后登录，在「我的控制台 -> 密钥(key)管理」中可以添加密钥。密钥是我们使用 API 必须传递的一个参数，每个不同的应用对应不同的密钥。

在小程序内，腾讯地图 API 的调用方式主要有两种：

• 通过腾讯地图提供的小程序 SDK
• WebService API 方式，即直接调用 API 的接口

这里笔者选择了 WebService API，原因如下：

1. 小程序 SDK 和 WebService API 都很方便，不需要加密数据，密钥都是对外暴露的
2. WebService API 使用微信 wx.request 方法可以直接发送请求，对代码无侵入性
3. 小程序 SDK 本质上还是用 wx.request 封装的 WebService API

根据逆地址查询接口的文档，只需要传入密钥和 location （经纬度组合）信息即可：

// lib/api.js
const QQ_MAP_KEY = 'ZVXBZ-xxxxxx-xxxxx-xxxxxK-LQFU6'
/**
 *  逆地址查询
 * @param {*} lat
 * @param {*} lon
 */
export const geocoder = (lat, lon, success = () => {}, fail = () => {}) => {
  return wx.request({
    url: 'https://apis.map.qq.com/ws/geocoder/v1/',
    data: {
      location: `${lat},${lon}`,
      key: QQ_MAP_KEY,
      get_poi: 0
    },
    success,
    fail
  })
}