请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册
搜索

技术分享 城市定位和城市选择经验浅谈

1
回复
1815
查看
[复制链接]

1

主题

2

帖子

15

积分

 楼主| 2019-10-21 11:53:24 显示全部楼层 |阅读模式
今天我们来聊聊城市定位和城市选择自定义组件的开发,在之前的一个项目中需要用到就开发了一个两级的城市选择组件:
功能需求: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
回复

使用道具 举报

464

主题

759

帖子

6440

积分

2019-10-21 16:21:57 显示全部楼层
感谢楼主分享~~
官方客服微信:kuaiyingyongguanKF
官方QQ群2:1012199894
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册