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

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

三级联动

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");

}

}

转载于:https://www.cnblogs.com/sunziyu/p/10736956.html