微信小程序位置获取

位置服务（LBS）是基于用户的位置来提供服务的技术，通过要配合第三方的服务来实现，如腾讯地图、高德地图、百度地图等，在本项目采用的是腾讯的位置服务。

申请使用腾讯位置服务需要按如下步骤操作：

1. 注册账号
2. 创建应用
3. 生成 key
4. 小程序管理后台添加合法域名

步骤参考视频的介绍和官方文档来操作，在此就不缀述了。

在使用位置服务的时候需要提供用户的位置（经纬度），关于用户的位置小程序提供了 API ，在使用获取位置的 API 时需要先在 app.json 中进行声明，并在小程序管理后进行申请，相关限制请参考文档说明

{
  "requiredPrivateInfos": [
    "getLocation",
    "chooseLocation"
  ],
  "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序位置接口的效果展示"
   }
}

调用 wx.getLocation() 获取用户当前位置，该 API 支持返回 Promise：

Page({
  async getLocation() {
    // 调用 API
    const { latitude, longitude } = await wx.getLocation()
    console.log(latitude, longitude)
  },
})

调用 wx.chooseLocation 会打开地图由用户自由选择一个位置后返回该位置的经纬度，该 API 支持返回 Promise：

Page({
  async chooseLocation() {
    // 调用小程序 API 获取新的位置
    const { latitude, longitude } = await wx.chooseLocation()
    console.log(latitude, longitude)
  },
})

准备工作都完成了，接下来可以到项目中使用腾讯位置服务提供的功能了：

1. 导入位置服务微信小程序 Javascript SDK，它是官方封装好的一个 .js 文件

// utils/qqmap.js
// 导入腾讯位置服务 SDK
import QQMapWX from '../libs/qqmap-wx-jssdk'
// 实例化位置服务（使用个人申请的 key）
export default new QQMapWX({
  key: '填写自已的 KEY',
})

2.调用 SDK 提供的方法 search 实现搜索周边小区的功能

// 导入腾讯位置服务
import QQMap from '../../../utils/qqmap'

Page({
  onLoad() {
    // 获取用户经纬度
    this.getLocation()
  },
  async getLoaction() {
    // 调用小和序 API 获取用户位置
    const { latitude, longitude } = await wx.getLocation()
    // 获取周边小区
    this.getPoint(latitude, longitude)
  },
  getPoint(latitude, longitude) {
    // search 是实现地点搜索功能的方法
    QQMap.search({
      keyword: '住宅小区', //搜索关键词
      location: [latitude, longitude].join(','), //设置周边搜索中心点
      page_size: 5,
      success: (result) => {
        // 过滤掉多余的数据
        const points = result.data.map(({ id, title, _distance }) => {
          return { id, title, _distance }
        })
        // 渲染数据
        this.setData({ points })
      },
    })
  },
})

将获取的小区信息渲染到页面上：

<!-- 检测用户登录状态 -->
<authorization>
  <view class="locate">
    <van-cell-group border="{{false}}" title="当前地点">
      ...
    </van-cell-group>
    <van-cell-group border="{{false}}" title="附近社区">
      <van-cell
        wx:for="{{points}}"
        wx:key="id"
        title="{{item.title}}"
        link-type="navigateTo"
        url="/house_pkg/pages/building/index"
        is-link
      />
    </van-cell-group>
  </view>
</authorization>

3.调用 SDK 提供的方法 reverseGeocoder 实现逆地址解析的功能，逆地址解析是指根据经纬度来获取具体的地址信息。

// 导入腾讯位置服务
import QQMap from '../../../utils/qqmap'
Page({
  // ...
  getPoint(latitude, longitude) {
    // 逆地址解析（根据经纬度来获取地址）
    QQMap.reverseGeocoder({
      location: [latitude, longitude].join(','),
      success: ({ result: { address } }) => {
        // 数据数据
        this.setData({ address })
      },
    })

    // search 是实现地点搜索功能的方法
    QQMap.search({
      keyword: '住宅小区', //搜索关键词
      location: [latitude, longitude].join(','), //设置周边搜索中心点
      page_size: 5,
      success: (result) => {
        // 过滤掉多余的数据
        const points = result.data.map(({ id, title, _distance }) => {
          return { id, title, _distance }
        })
        // 渲染数据
        this.setData({ points })
      },
    })
  },
})

4.调用 wx.chooseLocation 重新选择位置

// 导入腾讯位置服务
import QQMap from '../../../utils/qqmap'
Page({
  // ...
	chooseLocation() {
    // 调用小程序 API 获取新的位置
    const { latitude, longitude } = await wx.chooseLocation()
    // 获取新的位置附近的小区
    this.getPoint(latitude, longitude)
  },
  getPoint(latitude, longitude) {
    // ...
  }
})