开通腾讯位置服务
使用 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)
注意:
- 在 小程序管理后台 中设置 request 合法域名,添加 https://apis.map.qq.com
- 配置接口的调用额度:
- 点击 导航栏的 控制台 - 额度管理- 账号额度- 找到
- 点击 逆地址解析 的 配额分配
- 弹框里 选择 当前自己创建的应用 和 key
- 填写 配额分配 和 并发量 点击提交