|
今天我们来聊聊城市定位和城市选择自定义组件的开发，在之前的一个项目中需要用到就开发了一个两级的城市选择组件： 功能需求：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
| 
