微信小程序获取当前所在省市区

最近我想在微信小程序项目添加一个功能：获取用户的省市区

然后根据查资料和遇到的坑，作出如下总结：

我查了微信小程序的api文档和网上一些博客，微信小程序通过getLocation方法获取到用户的地理编码（经纬度坐标），然后根据这个坐标调用百度api进行逆地理编码得到省市区

功能大概就是下面这个样子

---

​ 初始化：

​ 获取定位：

​

​ 结果： （隐私。。我抹去了）

步骤1：

---

在app.json添加下面代码：

微信小程序文档对这个代码的说明

"permission": {
    "scope.userLocation": {
      "desc": "用来获取您附近的商品"
    }
  }

步骤2：

---

编写一个index.wxml

<view>
    <text>当前位置：{{currentCity}} </text>
</view>
<view>
    <!-- 这个自己换个按钮也可以 -->
    <text bindtap="getLocation">重新定位</text>
</view>

步骤3：

---

到百度地图api官网注册一个账号

在个人中心控制台哪里有个应用管理，进去创建一个应用，然后会有一个（访问应用AK）

接着编写一个index.js

这里网上有的博客有坑，百度地图api更新后，更换了请求url，老用户新老url都可以访问，而新注册的应该用下面这个，否则就会报 APP服务不可用 这个错误

http://api.map.baidu.com/reverse_geocoding/v3/?ak='+ak+'&output=json&coordtype=wgs84ll&location='+latitude+','+longitude,

接着编写 index.js

Page({
    data: {
        currentCity: '广东省 广州市 白云区'
    }
    // 钩子函数省略。。。。
    getLocation: function() {
    var page = this
    wx.getLocation({
      type: 'wgs84',
      success: function(res) {
        var longitude = res.longitude
        var latitude = res.latitude
        page.loadCity(longitude, latitude)
      }
    })
  },
  loadCity: function(longitude, latitude) {
    var page = this
    var ak = '你的AK'
    wx.request({
      
      url: 'http://api.map.baidu.com/reverse_geocoding/v3/?ak='+ak+'&output=json&coordtype=wgs84ll&location='+latitude+','+longitude,
      data: {},
      header: {
        'Content-Type': 'application/json'
      },
      success: function(res) {
        console.log(res);   // 打印信息，可以参考下图
        // 省
        var province = res.data.result.addressComponent.province;
        // 市
        var city = res.data.result.addressComponent.city;
        // 区
        var district = res.data.result.addressComponent.district;
        var newCity = province + ' ' + city + ' ' + district;
        page.setData(
          {currentCity: newCity}
        );
      },
      fail: function() {
        util.showErrorToast('定位当前位置失败');
      }
    })
  }
})

console.log(res)在控制台输出的信息如下：

结语

---

老是学习后端开发，偶尔接触一些前端的东西也不错，有vue的基础，微信小程序要入门还是挺容易的