小程序获取具体地址（经纬度转换成实际地址）

效果展示

注意： 因为微信小程序的api只提供了获取经纬度的接口，实际上获取的地址无法分割，所以我们引入第三方的腾讯jdk来完成。

• 以下是项目目录结构
  

具体步骤

1. 到腾讯申请一个开发者 key： key地址
2. 下载qqmap jdk到本地：** 下载地址：js-jdk下载地址**
3. 将jdk放到本地，并进入调用api即可

注意： 使用 微信开发者工具进行调试的时候注意把 校验域名地址 给关闭，不然可能会报错。

核心代码

• wxml

<view>
  <view>省：{{province}}</view>
  <view>市: {{city}}</view>
  <view>区: {{county}}</view>
  <view>详细地址：{{addressDetail}} </view>
</view>
<button bindtap="getAddress">获取地址</button>

• js

const app = getApp()
// 引入SDK核心类
var QQMapWX = require("../utils/qqmap-wx-jssdk.min");
var qqmapsdk;
Page({
  data: {
    province: "",
    city: "",
    county: "",
    addressDetail: "",
    longitude: "", //经度
    latitude: ""  // 纬度
  },
  onLoad: function () {
    // 实例化API核心类
    qqmapsdk = new QQMapWX({
      key: 'KVFBZ-GR2KD-PU344-H7WLB-MFV7Q-YOFFX'
    });

  },
  onShow: function () {

    
  },
  getAddress(){
    this.getJingWeiDu();
  },
  /**
   * 获取经纬度
   */
  getJingWeiDu() {
    let that = this;
    wx.getLocation({
      success(res) {
        console.log(res);
        that.setData({
          longitude: res.longitude,
          latitude: res.latitude
        }, () => {
          that.jingWeiduToDiZhi();
        });

      }
    })
  },
  /**
   * 经纬度转换成地址
   */
  jingWeiduToDiZhi() {
    
    let that = this;
    // 调用接口
    qqmapsdk.reverseGeocoder({
      location: {
        latitude: that.data.latitude,
        longitude: that.data.longitude
      },
      success: function(res){
        console.log("result")
        console.log(res);
        let tempData = res.result.address_component;
        that.setData({
          
          province: tempData.province,
          city: tempData.city,
          county: tempData.district,
          addressDetail: res.result.address
        });
      },
      fail: function(error) {
        console.log("err")
        console.error(error);
      },
      complete: function(res) {
        console.log("complete")
        console.log(res);
      }
    })
  }
})

最后别忘了 在 app.json中配置权限。

• app.json

{
  "pages": [
    "index/index"
  ],
  "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序位置接口的效果展示"
    }
  },
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"

}