uniapp中使用腾讯地图

2.1 位置服务

位置服务（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) {
       // ...
     }
   })