前导知识
1. 腾讯地图SDK接入
1. 申请开发者密钥
打开网址 /console/key.html，申请密钥，填写信息单击“提交”按钮，弹出提示内容 “key创建成功”，单击蓝色按钮设置 key，根据需求选中选项，如下图所示。
2. 下载微信小程序 JavaScriptSDK
官方下载地址：/lightmap/xcx/jssdk/qqmap-wx-jssdk1.0.zip
3. 登录小程序管理后台
设置安全域名，在 “设置” - “开发设置” 中设置 “request合法域名”，添加 https://apis.。如下图所示。
核心代码讲解
小程序提供了打开微信内置地图的 API 和定位用户位置的 API，需要用户授权才能使用，也就是会自动提示用户“是否同意获取您的位置”，同意后即可获取。
在 app.json 文件中声明 permission 属性
"permission": {"scope.userLocation": {"desc": "你的位置信息将用于小程序定位展示"}}
引入 SDK核心类，并且实例化，用于后期调用
// 引入SDK核心类var QQMapWX = require('../../utils/qqmap-wx-jssdk.js');var qqmap// 实例化API核心类var qqmapsdk = new QQMapWX({key: '开发密钥（key）' // 必填});
当用户授权后，获取当前用户的地理位置（微信返回的是经纬度、速度等参数）
// 获取当前位置（经纬度）onReady() {let vm = this;wx.getLocation({type: 'gcj02',success: (res) => {this.setData({latitude: res.latitude, //纬度longitude: res.longitude //经度})},})},
微信没有将经纬度直接转换为地理位置，借用腾讯位置服务中关于微信小程序的地理转换JS SDK 的API（返回信息中包括国家，省，市，区，经纬度等地理位置）
查询API文档获得如下信息：
reverseGeocoder(options:Object)：逆地址解析。该接口提供由坐标到坐标所在位置的文字描述的转换。输入坐标返回地理位置信息和附近poi列表。目前应用于物流、出行、O2O、社交等场景。服务响应速度快、稳定，支撑亿级调用。
满足传统对省市区、乡镇村、门牌号、道路及交叉口、河流、湖泊、桥、poi列表的需求。业界首创，提供易于人理解的地址描述：海淀区中钢国际广场(欧美汇购物中心北)。提供精准的商圈、知名的大型区域、附近知名的一级地标、代表当前位置的二级地标等。
注：坐标系采用gcj02坐标系
核心代码
getUserLocation() {let vm = thisqqmap.reverseGeocoder({//逆地址解析（经纬度 ==> 坐标位置）//位置坐标，默认获取当前位置，非必须参数/*** //Object格式location: {latitude: 39.984060,longitude: 116.307520},*//***//String格式location: '39.984060,116.307520',*/location: {latitude: vm.data.latitude,longitude: vm.data.longitude},success(res) {vm.setData({province:res.result.ad_info.province,city:res.result.ad_info.city,district:res.result.ad_info.district})}})}
完整代码
index.wxml页面代码
<view>经度：{{longitude}}---纬度：{{latitude}}</view><view>{{province}}---{{city}}---{{district}}</view>
index.js脚本文件
// 引入SDK核心类var QQMapWX = require('../../utils/qqmap-wx-jssdk.js');var qqmapPage({data: {longitude: '', //经度latitude: '', //纬度province: '', //省city: '', //市district: '' //区/县},onLoad() {// 实例化API核心类qqmap = new QQMapWX({key: '开发密钥（key）' // 必填})},// 获取当前位置（经纬度）onReady() {let vm = this;wx.getLocation({type: 'gcj02',success: (res) => {this.setData({latitude: res.latitude,longitude: res.longitude})vm.getUserLocation()},})},// 获取用户当前位置getUserLocation() {let vm = thisqqmap.reverseGeocoder({//逆地址解析（经纬度 ==> 坐标位置）location: {latitude: vm.data.latitude,longitude: vm.data.longitude},success(res) {console.log(res)vm.setData({province:res.result.ad_info.province,city:res.result.ad_info.city,district:res.result.ad_info.district})}})}})
app.json文件
{"permission": {"scope.userLocation": {"desc": "你的位置信息将用于小程序定位展示"}}}
