来源：快应用官方论坛
作者：cjhpsmj
今天我们来聊聊城市定位和城市选择自定义组件的开发，在之前的一个项目中需要用到就开发了一个两级的城市选择组件：
功能需求：
1、定位当前城市；
2、选择某个省份下的城市，选择后把城市和省份返回数据；
首先，我们要知道的是快应用的地理定位并没有返回城市信息，所以就需要借助第三方的地理位置查询服务，首选高德、百度、腾讯三家，都有免费的服务接口。
这个根据自己的实际情况选择就好了，因为他们都有微信小程序的SDK，我自己最先选择了高德，之前其他项目已经申请好了相关账号及服务。
1、我们现在就开始调整SDKJS,对SDKJS中数据请求接口做相应的调整，将微信SDKJS文件中的wx.request替换为fetch.fetch,并将wx.request接口中的的参数增加responseType:’json’，因为fetch.fetch接口中返回结果默认是’text’，需要json格式数据就需要加上此参数，不然再success中无法获取到相应的数据。如下：
修改前：
wx.request({
url: "https://restapi.amap.com/v4/direction/bicycling",
data: d,
method: "GET",
header: {
"content-type": "application/json"
},
success: function (b) {
b && b.data && b.data.data && a.success({
paths: b.data.data.paths
})
},
fail: function (b) {
a.fail({
errCode: "0",
errMsg: b.errMsg || ""
})
}
})
修改后：
fetch.fetch({
url: "https://restapi.amap.com/v4/direction/bicycling",
data: d,
method: "GET",
responseType:’json’,
header: {
"content-type": "application/json"
},
success: function (b) {
b && b.data && b.data.data && a.success({
paths: b.data.data.paths
})
},
fail: function (b) {
a.fail({
errCode: "0",
errMsg: b.errMsg || ""
})
}
})
引用修改好的SDKJS到当前组件中，设置当前页面的全局变量，然后设置KEY,然后调用getRegeo方法，代码如下：
//高德地图定位
const _this = this
myAmapFun = new amapFile.AMapWX({ key: '你自己的key' });
myAmapFun.getRegeo({
success: function (data) {
if (data) {
//
获得的省份
let province = data[0].regeocodeData.addressComponent.province
//
获得的城市
let city= data[0].regeocodeData.addressComponent.city
if (province === '
北京市
'
|| province === '天津市
'
|| province === '上海市
'
|| province === '重庆市
'
) { } else {
_this.dealPositionCity(city)
}
}
},
fail: function (info) {
prompt.showToast({ message: '
定位失败
'
}) }
})
定位城市和省份已经得到了，然后返回相关数据了，欢迎大家来探讨，谢谢，好不好用或是否有提供思路，请大家评价下
源码参考：
https://github.com/cjhheyan/quickApp_ChooseCity
扫码关注，敬请期待快应用更多精彩内容！
快来关注我们吧
