微信小程序 - 獲取所在位置(省、市、區)

 

 

 

實現步驟

1. 獲取當前經緯度

 

2. 調用騰訊(百度、高德)地圖對應的請求地址，一般都會有獨一的key, 譬如

 

騰訊地圖調用地址：

https://apis.map.qq.com/ws/geocoder/v1/?location=${latitude},${longitude}&key=${keys}

 

百度地圖調用地址： 

https://apis.map.baidu.com/ws/geocoder/v2/?location=${latitude},${longitude}&key=${keys}

　　

wxml

 

<view>{{district}}</view>

<picker mode="region" bindchange="bindRegionChange" value="{{region}}" custom-item="{{customItem}}">
  <view class="picker">
    當前選擇：{{region[0]}} - {{region[1]}} - {{region[2]}}
  </view>
</picker>

 

 

js

 

let keys = 'SGXBZ-6X3K6-NYLSF-MALZD-QC6PK-BABOS';
let _page, _this;

Page({

  /**
   * 頁面的初始數據
   */
  data: {
    customItem: '全部'
  },

  /**
   * 生命周期函數--監聽頁面加載
   */
  onLoad: function(options) {
    _this = this;
    wx.getLocation({
      success: function(res) {
        _this.getDistrict(res.latitude, res.longitude)
      },
    })
  },


  getDistrict(latitude, longitude) {
    _page = this;
    wx.request({
      url: `https://apis.map.qq.com/ws/geocoder/v1/?location=${latitude},${longitude}&key=${keys}`,
      header: {
        'Content-Type': 'application/json'
      },
      success: function(res) {
        console.log(res.data.result.address_component.district, res.data.result)
        
        // 省
        let province = res.data.result.address_component.province;
        // 市
        let city = res.data.result.address_component.city;
        // 區
        let district = res.data.result.address_component.district;
    
        _page.setData({
          district: res.data.result.address_component.district,
          region: [province,city,district]
        })
      }
    })
  },

  bindRegionChange (e) {
    console.log('picker發送選擇改變，攜帶值為', e.detail.value)
    this.setData({
      region: e.detail.value
    })
  }
})