小程序仿某东三级联动选择地址和搜索提示

调用腾讯地图小程序sdk三个接口

SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

三级联动

map.getCityList 来获取全部的城市，返回三个数组包括省市区 map.getDistrictByCityId来根据城市的id来返回下级城市列表， 注意事项。 点击城市列表的时候需要给城市添加一个属性来展示选中和点击已经选中地址的来判断是第一次查询还是第二次查询 项目需要还要判断下选择的是不是直辖市， 三级联动的时候保存下省市区，坐标， 搜索提示的需要传省市， 搜素提示点击的时候覆盖下省市区和坐标  onLoad : function ( options) { map. getCityList({ success : function ( res) { if ( res. status == 0) { _this. setData({ cityList: res. result[ 0] }) } else { console. log( '未获取到数据') } } }) }, onShow : function () {
}, nameInput : function ( e) { this. setData({ name: e. detail. value }); }, tapgender( e) { this. setData({ gender: e. currentTarget. dataset. id }) },
phoneInput : function ( e) { this. setData({ phoneNumber: e. detail. value }); },
addressInput : function ( e) { let _t = this clearTimeout( t) t = setTimeout(() => { _t. serachkeywords( e. detail. value) }, 200) this. setData({ houseNum: e. detail. value }); }, serachkeywords( keyword) { let _t = this; demo. getSuggestion({ keyword: keyword, region: _t. data. selectStr, region_fix: 1, policy: 0, success : function ( res) { let data = res. data for ( let i in data) { data[ i]. address = data[ i]. address. replace( data[ i]. province, '') data[ i]. address = data[ i]. address. replace( data[ i]. city, '') data[ i]. address = data[ i]. address. replace( data[ i]. district, '') } _t. setData({ datalits: data }) }, fail : function ( res) { console. log( res); }, complete : function ( res) { } }); }, itemtap : function ( e) { let index = e. currentTarget. dataset. index let str = ` ${ this. data. datalits[ index]. address }${ this. data. datalits[ index]. title } ` this. setData({ province: this. data. datalits[ index]. province, city: this. data. datalits[ index]. city, county: this. data. datalits[ index]. district, houseNum: str, onFocus: true, latitude: this. data. datalits[ index]. location. lat, longitude: this. data. datalits[ index]. location. lng }) }, openmap : function () { this. maskShow() }, selectCity : function ( e) { // 三级联动选择城市 let item = e. currentTarget. dataset. item item. name ? item. name = item. name : item. name = item. fullname let arr = this. data. selectedCity let cityList = this. data. cityList let sel = cityList. filter(( e) => { return e. select == true }) if ( sel. length != 0) { arr = arr. slice( 0, this. data. selectedIndex) this. setData({ hasChild: true }) } for ( let i in cityList) { if ( item. id == cityList[ i]. id) { cityList[ i]. select = true } else { cityList[ i]. select = false } } this. setData({ cityList: cityList }) let _this = this if ( this. data. hasChild) { arr. push( item) } demo. getDistrictByCityId({ id: item. id, success : function ( res) { if ( res. status == 0) { _this. setData({ cityList: res. result[ 0] }) } }, fail : function ( error) { if ( error. status == 363) { _this. setData({ hasChild: false, selectedIndex: _this. data. selectedCity. length - 1 }) _this. maskHide() } } }) this. setData({ selectedCity: arr }) }, subheadSelect : function ( e) { let index = e. currentTarget. dataset. index this. setData({ selectedIndex: index }) let id = e. currentTarget. dataset. item. id let _this = this let selectId = '' if ( index == 0) { demo. getCityList({ success : function ( res) { if ( res. status == 0) { let cityList = res. result[ 0] for ( let i in cityList) { if ( id == cityList[ i]. id) { cityList[ i]. select = true } } _this. setData({ cityList: cityList }) } else { console. log( '未获取到数据') } } }) } else { selectId = this. data. selectedCity[ index - 1]. id demo. getDistrictByCityId({ id: selectId, success : function ( res) { if ( res. status == 0) { let cityList = res. result[ 0] for ( let i in cityList) { if ( id == cityList[ i]. id) { cityList[ i]. select = true } } _this. setData({ cityList: cityList }) } }, fail : function ( error) { if ( error. status == 363) { _this. setData({ hasChild: false }) _this. maskHide() } } }) } }, maskHide : function () { let str = '' let selectStr = '' let arr = this. data. selectedCity let municipality = [ '北京市', '天津市', '上海市', '重庆市'] for ( let i in this. data. selectedCity) { str += this. data. selectedCity[ i]. fullname if ( i < 2) { selectStr += this. data. selectedCity[ i]. name } } if ( municipality. indexOf( arr[ 0]. fullname) == 0) { this. setData({ maskStatus: false, address: str, selectStr: selectStr, province: arr. length > 0 ? arr[ 0]. fullname : '', city: arr. length > 0 ? arr[ 0]. fullname : '', county: arr. length > 1 ? arr[ 1]. fullname : '', latitude: arr[ arr. length- 1]. location. lat, longitude: arr[ arr. length- 1]. location. lng }) } else { this. setData({ maskStatus: false, address: str, selectStr: selectStr, province: arr. length > 0 ? arr[ 0]. fullname : '', city: arr. length > 1 ? arr[ 1]. fullname : '', county: arr. length > 2 ? arr[ 2]. fullname : '', latitude: arr[ arr. length- 1]. location. lat, longitude: arr[ arr. length- 1]. location. lng }) } }, maskShow : function () { this. setData({ maskStatus: true }) }, next_step : function ( e) { if ( this. data. name. trim() == "") { wx. showToast({ title: '请填写姓名', icon: 'none', duration: 2000 }) return false; } if ( this. data. name. length > 10) { wx. showToast({ title: '姓名不能超过8位字符！', icon: 'none', duration: 2000 }) return false; } var myreg = / ^ [ 1 ][ 3,4,5,7,8,9 ][ 0-9 ] {9} $ /; if (! myreg. test( this. data. phoneNumber)) { wx. showToast({ title: '请填写正确的手机号码', icon: 'none', duration: 2000 }) return false; } if ( this. data. address. trim() == "") { wx. showToast({ title: '请选择地址', icon: 'none', duration: 2000 }) return false; } if ( this. data. houseNum. trim() == "") { wx. showToast({ title: '请填写门牌号', icon: 'none', duration: 2000 }) return false; }
let param = { addressee: this. data. name, city: this. data. city, country: '中国', county: this. data. county, deliveryAddress: this. data. address, gender: this. data. gender + "", phone: this. data. phoneNumber, province: this. data. province, houseNumber: this. data. houseNum, latitude: this. data. latitude, longitude: this. data. longitude } wx. showLoading(); if ( this. data. update == 0) { http. post( "/deliveryAddress", param, function ( res) { wx. hideLoading(); wx. navigateBack({ delta: 1 }) }, "POST"); } else { http. post( "/deliveryAddress/" + this. data. id, param, function ( res) { wx. hideLoading(); wx. navigateBack({ delta: 1 }) }, "PUT"); } }

扫码关注我们

微信号：SRE实战

拒绝背锅 运筹帷幄