快应用之地图——获取全国的省/直辖市、市/区、县

最近在学快应用，学的过程模仿滴滴写页面再加深理解和运用，发觉哦，很有趣哦。

好啦，开始我们的正题。使用快应用的数据请求接口fetch(需要import哦)来向本地的服务请求数据，获取全国的省/直辖市（相关的数据url:https://github.com/Enmeng/ChinesePlacename.git），将获得的数据用select、option组合展示出来，用户选择其中一个选中，触发select的onchange事件，在处理事件中根据选择项的值向服务器请求该省/直辖市的下一级的地名，并用下一个select、option组合来显示，一直下钻到区。

下面是相关的部分代码哦。

index.ux中的select部分

 

         

            省/直辖市
            
              {{pro}}
            
            |
         
         

           市/区
           
             {{city}}
           
           |
         
         

          区
          
            {{county}}
          
        
       

接下来是处理事件部分

      onInit:function(){
        prompt.showToast({message:this.currentCity});
        
        var that=this;
        fetch.fetch({
        url:that.baseUrl,
        success: function (response) {
            that.listPro=[].concat(JSON.parse(response.data));
        },
        fail: function (err, code) {
            prompt.showToast({message:err});
        }
       })
      },
      enterKeyClick:function(res){
        this.selectCity=res.value;
      },
      selectProChange:function(res){
        this.selectPro=res.newValue;
        var url=this.baseUrl+'?currentPro='+this.selectPro;
        var that=this;
        fetch.fetch({
        url: url,
        success: function (response) {
            that.listCity=[].concat(JSON.parse(response.data));
        },
        fail: function (err, code) {
            prompt.showToast({message:err});
        }
       })
      },
      selectCityChange:function(res){
        this.selectCity=res.newValue;
        var url=that.baseUrl+'?currentPro='+this.selectPro+'&¤tCity='+this.selectCity;
        var that=this;
        fetch.fetch({
          url:url,
          success:function(response){
            that.listCounty=[].concat(JSON.parse(response.data));
          },
          fail:function(err,code){
            prompt.showToast({message:err});
          }
        })
      },
      selectCountyChange:function(res){
        this.selectCounty=res.newValue;
      },

本地服务器部分代码

fs.readFile('./static/city.json', 'utf8', function(err, data){
    //获得所有省/直辖市
    var pro=JSON.parse(data).arrCity;
    var list=[];
    if(req.query.currentPro==undefined&&req.query.currentCity==undefined){
      pro.forEach(element => {
        list.push(element.name);
      });
    }else{
      //获得特定省/直辖市的市/区
      if(req.query.currentPro!=undefined&&req.query.currentCity==undefined){
        let item=pro.filter(function(item){
          return item.name == req.query.currentPro; 
        })
        if(item[0]!=undefined&&item[0].sub!=undefined){
          let sub=item[0].sub;
          sub.forEach(element=>{
            list.push(element.name);
          })
        }else{
          list=[];
        }
      }else{
        //获得特定市的区
        let item=pro.filter(function(item){
          return item.name==req.query.currentPro;
        })
        if(item[0]!=undefined&&item[0].sub!=undefined){
          let sub=item[0].sub;
          let subItem=sub.filter(function(subItem){
            return subItem.name==req.query.currentCity;
          });
          if(subItem[0]!=undefined&&subItem[0].sub!=undefined){
            let subSubItem=subItem[0].sub;
            subSubItem.forEach(element=>{
              list.push(element.name);
            })
          }else{
            list=[];
          }
        }else{
          list=[];
        }
      }
    }
    res.send(list);