前端【小程序】14-小程序基础篇【地理位置】【腾讯定位服务】【小程序使用地理位置操作流程】

腾讯定位服务

　　官网：https://lbs.qq.com
　　位置服务（LBS）是基于用户的位置来提供服务的技术，通过要配合第三方的服务来实现，如腾讯地图、高德地图、百度地图等，享+项目采用的是腾讯的位置服务。
　　申请使用腾讯位置服务需要按如下步骤操作：

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

① 扫码登录腾讯定位服务，绑定手机号和邮箱完成注册

② 创建应用，填写应用名称和类型

　　

 ③ 生成API-KEY

　　

给不同请求分配配额度

 分配结果

 

 ④ 小程序管理后台添加合法域名

 查看开发文档

　　文档地址：https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview

　　

 根据官方说明，下载SDK和添加合法域名

　　SDK下载后，放入项目中，根据示例引入SDK然后使用

　　

 

登录到小程序后台管理，添加合法域名

 

 

小程序使用地理位置的操作流程

　　文档：https://developers.weixin.qq.com/community/develop/doc/000a02f2c5026891650e7f40351c01?highline=%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%9C%B0%E7%90%86%E4%BD%8D%E7%BD%AE

　　

　　需要在app.json文件中添加

  "requiredPrivateInfos": [
    "getLocation",   // 用到哪个API 就要在这里添加进去
    "chooseLocation"
  ],

 

 

搜索附近住宅小区

// house_pkg/pages/locate/index.ts
var QQMapWX = require('../../../libs/qqmap-wx-jssdk')
// 实例化API核心类
var qqmapsdk = new QQMapWX({ key: 'U4UBZ-NUSE5-V4HIR-IZKTR-TPUB6-PAF2A' })

Page({
  /**
   * 页面的初始数据
   */
  data: {
    locateList: []
  },

  /**
   * 生命周期函数--监听页面加载
   */
  async onLoad () {
    // 搜索附近小区
    this.search(latitude, longitude)
  },
  /**
   * 查询附近住宅小区
   */
  search () {
    // 调用接口
    qqmapsdk.search({
      keyword: '住宅小区',
      page_size: 5,
      success: res => {
        console.log('搜索位置结果: ', res)
        this.setData({
          locateList: res.data
        })
      }
    })
  }
})

根据小程序API 获取当前定位，然后根据定位获取附近住宅小区

// house_pkg/pages/locate/index.ts
var QQMapWX = require('../../../libs/qqmap-wx-jssdk')
// 实例化API核心类
var qqmapsdk = new QQMapWX({ key: 'U4UBZ-NUSE5-V4HIR-IZKTR-TPUB6-PAF2A' })

Page({
  /**
   * 页面的初始数据
   */
  data: {
    locateList: [],
    address: ''
  },

  /**
   * 生命周期函数--监听页面加载
   */
  async onLoad () {
    // 获取用户当前位置(经纬度)
    const { latitude, longitude } = await wx.getLocation({ type: 'gcj02' })
    // 搜索附近小区
    this.search(latitude, longitude)
  },
  /**
   * 查询附近位置
   * @param {*} latitude    纬度
   * @param {*} longitude   经度
   */
  search (latitude, longitude) {
    // 调用接口
    qqmapsdk.search({
      location: { latitude, longitude },
      keyword: '住宅小区',
      page_size: 5,
      success: res => {
        console.log('搜索位置结果: ', res)
        this.setData({
          locateList: res.data
        })
      }
    })
  }
})

根据小程序API 获取当前定位，然后使用腾讯定位服务解析成地址

// house_pkg/pages/locate/index.ts
var QQMapWX = require('../../../libs/qqmap-wx-jssdk')
// 实例化API核心类
var qqmapsdk = new QQMapWX({ key: 'U4UBZ-NUSE5-V4HIR-IZKTR-TPUB6-PAF2A' })

Page({
  /**
   * 页面的初始数据
   */
  data: {
    address: ''
  },

  /**
   * 生命周期函数--监听页面加载
   */
  async onLoad () {
    // 获取用户当前位置(经纬度)
    const { latitude, longitude } = await wx.getLocation({ type: 'gcj02' })
    // 获取用户当前位置(根据经纬度解析的地址)
    this.getPoint(latitude, longitude)
  },

  /**
   * 根据经纬度逆向解析地址
   * @param {*} latitude    纬度
   * @param {*} longitude   经度
   */
  getPoint (latitude, longitude) {
    qqmapsdk.reverseGeocoder({
      location: { latitude, longitude },
      success: res => {
        this.setData({
          address: res.result.address // 拿到解析后的地址
        })
      }
    })
  }
})

使用微信小程序API 打开位置选择，根据选择的位置信息，搜索附近住宅小区

// house_pkg/pages/locate/index.ts
var QQMapWX = require('../../../libs/qqmap-wx-jssdk')
// 实例化API核心类
var qqmapsdk = new QQMapWX({ key: 'U4UBZ-NUSE5-V4HIR-IZKTR-TPUB6-PAF2A' })

Page({
  /**
   * 页面的初始数据
   */
  data: {
    locateList: [],
    address: ''
  },

  /**
   * 生命周期函数--监听页面加载
   */
  async onLoad () {
    // 获取用户当前位置(经纬度)
    const { latitude, longitude } = await wx.getLocation({ type: 'gcj02' })
    // 获取用户当前位置(根据经纬度解析的地址)
    this.getPoint(latitude, longitude)
    // 搜索附近小区
    this.search(latitude, longitude)
  },
  /**
   * 查询附近位置
   * @param {*} latitude    纬度
   * @param {*} longitude   经度
   */
  search (latitude, longitude) {
    // 调用接口
    qqmapsdk.search({
      location: { latitude, longitude },
      keyword: '住宅小区',
      page_size: 5,
      success: res => {
        console.log('搜索位置结果: ', res)
        this.setData({
          locateList: res.data
        })
      }
    })
  },
  /**
   * 根据经纬度逆向解析地址
   * @param {*} latitude    纬度
   * @param {*} longitude   经度
   */
  getPoint (latitude, longitude) {
    qqmapsdk.reverseGeocoder({
      location: { latitude, longitude },
      success: res => {
        this.setData({
          address: res.result.address
        })
      }
    })
  },
  /**
   * 选择当前定位
   */
  async chooseLocation () {
    const res = await wx.chooseLocation()
    console.log('定位选择位置的结果: ', res)
    this.setData({
      address: res.name
    })
    // 基于选择位置，搜索附近小区
    this.search(res.latitude, res.longitude)
  }
})