微信小程序

 

 

实现步骤

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
    })
  }
})