实现步骤
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 }) } })