154-收货地址-腾讯位置服务逆地址解析获取地址.md

开通腾讯位置服务

使用 wx.chooseLocation() 能够很方便的让用户来选择地理位置,但是 wx.chooseLocation()返回的数据并没有包含省市区、省市区编码数据。而日常接口,需要传递省市区、省市区编码数据。

这时候我们可以使用 腾讯位置服务 将返回的经度、维度 进行逆地址解析,转换成详细地址

LBS 逆地址解析

腾讯位置服务官方文档 第 3 项,下载 LBS JavaScriptSDK v1.2

// 引入 QQMapWX 核心类
import QQMapWX from "../../../libs/qqmap-wx-jssdk";
Page({
  data: {
    // 需要将请求参数放到 data对象下,方便再模板中绑定数据
    name: "", // 收货地址
    phone: "", // 手机号码
    provinceName: "", // 省
    provinceCode: "", // 省编码
    cityName: "", // 市
    cityCode: "", // 市编码
    distictName: "", // 区
    distictCode: "", // 区编码
    address: "", // 详细地址
    fullAddress: "", // 完整地址
    isDefault: false, // 是否设置默认地址 0 不设置默认地址
  },
  // 获取用户地理位置信息
  async onLocation() {
    // latitude 维度,longitude 经度,name 搜索的地点,address
    const { latitude, longitude, name, address } = await wx.chooseLocation();
    // 使用实例化方法 reverseGeocoder 方法进行逆解析
    this.qqmapwx.reverseGeocoder({
      location: {
        latitude,
        longitude,
      },
      success: (res) => {
        // 获取省市区、省市区编码
        const { adcode, province, city, distict } = res.result.ad_info;
        // 获取街道、门牌 (街道、门牌 可能为空)
        const { street, street_number } = res.result.address_component;
        // 获取标准地址
        const { standard_address } = res.result.formatted_addresses;
        // 对获取的数据进行格式化、组织 然后赋值给 data 中的字段
        this.setData({
          provinceName: province, // 省
          // 如果是省,前 2 位有值,后面 4 位是 0
          provinceCode: adcode.replace(adcode.substring(2, 6), "0000"), // 省编码
          cityName: city, // 市
          // 如果是市,前 4 位有值,后面 2 位是 0
          cityCode: adcode.replace(adcode.substring(4, 6), "00"), // 市编码
          distictName: distict, // 区
          distictCode: distict && adcode, // 区编码
          // 组织详细地址
          address: street + street_number + (name ? "(" + name + ")" : ""), // 详细地址
          fullAddress: standard_address + (name ? "(" + name + ")" : ""), // 完整地址
        });
      },
    });
  },
  onLoad() {
    // 对核心类 QQMapWX 进行实例化
    this.qqmapwx = new QQMapWX({
      // key 在进行你解析的时候,如果发现 key 只能使用一次,需要在腾讯位置服务后台配置额度
      key: "HLEBZ-6QJWZ-P5BXN-TQ6D3-WRIAT-RIFGQ",
    });
  },
});

行政区划代码规则说明(adcode)

注意:

  1. 小程序管理后台 中设置 request 合法域名,添加 https://apis.map.qq.com
  2. 配置接口的调用额度:
    • 点击 导航栏的 控制台 - 额度管理- 账号额度- 找到
    • 点击 逆地址解析 的 配额分配
    • 弹框里 选择 当前自己创建的应用 和 key
    • 填写 配额分配 和 并发量 点击提交
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容