uniapp三级联动地图

标签： map

<!--三级联动选中区域-->
 <picker-view indicator-style="height: 50px;" style="width: 100%; height: 150px;"  @change="bindChange1">
    <picker-view-column>
        <view v-for="(item,index) in data1" style="line-height: 50px; text-align: center;" :key='index'>{{item.AreaName}}
        </view>
    </picker-view-column>
    
    <picker-view-column>
         <view v-for="(item,index) in data2" style="line-height: 50px; text-align: center;":key="index">{{item.AreaName}}
         </view>
     </picker-view-column>
     
    <picker-view-column>
        <view v-for="(item,index) in data3" style="line-height: 50px; text-align: center;" :key="index">{{item.AreaName}}
        </view>
    </picker-view-column>
 </picker-view>
data(){
    return {
                data1:[],//省
                data2:[],//市
                data3:[],//区
                indexVal:[0,0,0]//picker-view选中数组下标初始值
            }
}
bindChange1(e){//picker-view组件的change事件
                let that=this;
                let indexS=e.target.value;//选中下标数组
                this.indexVal[0]=indexS[0];
                if(indexS[1]){//有值再赋值
                    that.indexVal[1]=indexS[1];
                }
                if(indexS[2]){
                    that.indexVal[2]=indexS[2];
                }
                //1.通过下标0获取省对应下标的ID值调用市接口 2.表示手动选取
                this.loadCities(that.data1[indexS[0]].AreaId,2);
                //获取"区" 未选择市时默认选中0
                that.loadAreas(that.data2[0].AreaId)
                
                
            },
    onLoad() {//生命周期调用
            this.loadProvinces(1)//页面加载 1标识页面加载 2主动调用
        }
    loadProvinces(e) { // 加载省份
                let that=this;
                uni.request({
                    url: 'http://test-api.tiananhub.com/api/province/GetListProvince',
                    method: 'get',
                    success: async (res) => {
                        this.data1 = res.data.data;//页面赋值
                        this.loadCities(this.data1[0].AreaId,e)//调用市
                    
                    },
                    fail:async(res) => {
                    }
                })
            },
            loadCities(AreaId,f) {//加载市
                let that=this;
                uni.request({
                    url: 'http://test-api.tiananhub.com/api/province/GetListCity',
                    data: {
                        AreaId
                    },
                    method: 'get',
                    success:  (res) => {
                        that.data2 = res.data.data;
                        if(f==1){//页面调用时默认显示第一条数据
                            this.loadAreas(this.data2[0].AreaId)
                        }else{//主动调用 如果picker-view选择的第二个值大于等于当前省份市区的数量重新赋值0
                            if(that.indexVal[1]>=that.data2.length){
                                that.indexVal[1]=0;
                            }else{
                            //调用区域  that.loadAreas(that.data2[that.indexVal[1]].AreaId)
                            }
                            
                        }
                    },
                    fail:async(res) => {
                    }
                })
            },
            loadAreas(AreaId) {//加载区域
                let that=this;
                uni.request({
                    url: 'http://test-api.tiananhub.com/api/province/GetListCity',
                    data: {
                        AreaId
                    },
                    method: 'get',
                    success: async (res) => {
                        this.data3= res.data.data;
                        if(that.indexVal[2]>=that.data3.length){
                            that.indexVal[2]=0;
                        }
                        
                    },
                    fail:async(res) => {
                    }
                })
            },