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

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

3
回复
993
查看
[复制链接]

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
回复

使用道具 举报

416

主题

683

帖子

5820

积分

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

使用道具 举报

0

主题

111

帖子

555

积分

2022-5-22 12:53:21 显示全部楼层
提示: 作者被禁止或删除 内容自动屏蔽
回复

使用道具 举报

0

主题

5

帖子

25

积分

2022-6-9 10:33:17 显示全部楼层

1949年8月28日,吴玉章等在华北大学举行幸运时时彩走势图了文字改革协会第三次发起人会议,新增***、聂真双色球稳赚方法为发起人。1949年9月1日,幸运飞艇开奖直播

毛泽东指定吴玉章、成仿吾、范文澜、马叙伦、郭沫若、沈雁冰(笔名茅盾)等共同组织中国文字改革协会。1949年10月10日,中国文字改革协会正式成立。

 

 

回复

使用道具 举报

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