大屏省市县接口联调，地图下钻联动省市县请求小班数据

src/components/amap.vue

@@ -6,6 +6,7 @@
 
 <script>
 import AMapLoader from '@amap/amap-jsapi-loader';
+import { smallClassMap } from "@/service/index.js";
 export default {
   name: 'amap',
   data() {
@@ -29,6 +30,17 @@ export default {
     // this.initMAp();
     this.initAMap();
   },
+  watch: {
+    '$store.state.addr.parentId'(val) {
+      console.log(val);
+      if (this.map) {
+        this.switch2AreaNode(val);
+        this.getDistrict(this.$store.state.addr.parentName, this.$store.state.addr.mapLevel);
+        this.map.clearMap();
+      }
+      
+    }
+  },
   created() {},
   methods: {
     initAMap() {
@@ -96,7 +108,7 @@ export default {
             pathL: pathArray,
             strokeColor: '#00eeff',
             strokeWeight: 1,
-            fillColor: '#1c212a', // 遮罩背景色黑��
+            fillColor: '#0c1b05', // 遮罩背景��
             fillOpacity: 0.8
           });
           polygon.setPath(pathArray);
@@ -163,11 +175,16 @@ export default {
       this.districtExplorer.on('featureClick', (e, feature) => {
         that.map.clearMap();
         const props = feature.properties;
-        this.switch2AreaNode(props.adcode);
+        console.log(props);
         mapLevel = props.level;
         adName = props.name;
-        that.getDistrict(adName, mapLevel);
+        // that.getDistrict(adName, mapLevel);
+         // this.switch2AreaNode(props.adcode);
+        this.$store.dispatch('searchArea', { parentId: props.adcode ,name:props.name,mapLevel:props.level});
+        // this.$store.commit('changeSelectCity', {value:props.adcode,label:props.name})
+        console.log( this.$store.state.addr);
       });
+      console.log(this.$store.state.addr);
       this.switch2AreaNode(adcode);
       that.getDistrict(adName, mapLevel);
     },
@@ -235,6 +252,7 @@ export default {
     },
     //切换区域
     switch2AreaNode(adcode, callback) {
+      console.log(adcode);
       if (
         this.currentAreaNode &&
         '' + this.currentAreaNode.getAdcode() === '' + adcode
@@ -272,7 +290,10 @@ export default {
           callback(null, areaNode);
         }
       });
-    }
+    },
+    // getSmallClass() {
+    //   smallClassMap
+    // }
   }
 };
 </script>

src/components/pickerAddr.vue

@@ -8,31 +8,31 @@
       <el-select v-model="selectCity" placeholder="请选择" @change="cityChange($event,'city')">
         <el-option
           v-for="item in vuexCityList"
-          :key="item.value"
-          :label="item.label"
-          :value="{value:item.value,label:item.label}"
+          :key="item.areaCode"
+          :label="item.areaName"
+          :value="{value:item.areaCode,label:item.areaName}"
         ></el-option>
       </el-select>
     </div>
     <div class="select-wrap">
       县：
-      <el-select v-model="selectDistrict" placeholder="请选择" @change="cityChange($event,'county')">
+      <el-select v-model="selectDistrict" placeholder="请选择" @change="cityChange($event,'district')">
         <el-option
           v-for="item in vuexDistrictList"
-          :key="item.value"
-          :label="item.label"
-          :value="{value:item.value,label:item.label}"
+          :key="item.areaCode"
+          :label="item.areaName"
+          :value="{value:item.areaCode,label:item.areaName}"
         ></el-option>
       </el-select>
     </div>
     <div class="select-wrap">
       乡：
-      <el-select v-model="selectStreet" placeholder="请选择" >
+      <el-select v-model="selectStreet" placeholder="请选择">
         <el-option
           v-for="item in vuexStreetList"
-          :key="item.value"
-          :label="item.label"
-          :value="{value:item.value,label:item.label}"
+          :key="item.areaCode"
+          :label="item.areaName"
+          :value="{value:item.areaCode,label:item.areaName}"
         ></el-option>
       </el-select>
     </div>
@@ -40,52 +40,39 @@
 </template>
 
 <script>
-// import { mapMutations, mapGetters } from 'vuex';
-import { searchApi } from "@/service/index.js";
+import { mapMutations, mapGetters } from 'vuex';
+
 export default {
   name: '',
   components: {},
   data() {
     return {
-      selectCity:'',
-      selectDistrict: '',
-      selectStreet: '',
-      vuexCityList:[],
-      vuexDistrictList:[],
-      vuexStreetList: [],
+      selectCity: {},
+      selectDistrict: {},
+      selectStreet: {},
       value: '',
-      parentId:''
+      parentId: '520000',
+      name: ''
     };
   },
-  // computed: {
-  //   // 引入getters中的计算属性，需要在 computed 中引入
-  //   ...mapGetters(['vuexCityList', 'vuexDistrictList', 'vuexStreetList'])
-  // },
+  computed: {
+    // 引入getters中的计算属性，需要在 computed 中引入
+    ...mapGetters(['vuexCityList', 'vuexDistrictList', 'vuexStreetList'])
+  },
   created() {
-    this.searchArea()
+    this.$store.dispatch('searchArea', { parentId: this.parentId ,name:this.name});
   },
   methods: {
-    searchArea(name) {
-      searchApi({ parentId: "156052" }).then(res => {
-        console.log(res);
-        console.log(name);
-        if (name == "city") {
-          this.vuexDistrictList = res.data;
-        } else if (name == "county") {
-          this.vuexStreetList = res.data;
-        }else{
-          this.vuexCityList = res.data;
-        }
-      });
-    },
-    cityChange(e,name) {
-      if (!val) {
-        this.searchArea(name);
-      } else {
-        this.parentId = val;
-        this.searchArea(name);
-      }
-    },
+    ...mapMutations([
+      'changeSelectCity',
+      'changeSelectDistrict',
+      'changeSelectStreet'
+    ]),
+    cityChange(val, level) {
+      this.parentId = val.value.substring(0,6);
+      this.name = level;
+      this.$store.dispatch('searchArea', { parentId: this.parentId ,name:val.label,mapLevel:level});
+    }
   }
 };
 </script>

src/store/addr/index.js

@@ -1,69 +1,75 @@
 /*
  * @LastEditors: gcz
  */
-
+import { searchApi } from "@/service/index.js";
 const addr = {
   state: {
     parentId: "156052",
+    parentName: '',
     vuexSelectCity: "",
     vuexSelectDistrict: "",
     vuexSelectStreet: "",
-
+    // 市
     vuexCityList: [],
+    // 区
     vuexDistrictList: [],
-    vuexStreetList: []
+    // 乡镇
+    vuexStreetList: [],
+    selectCity: {},
+    selectDistrict: {},
+    selectStreet: {}
   },
   mutations: {
-    changeCityList(state, t) {
-      state.vuexCityList = t;
+    // 获取市
+    changeCityList(state, cityList) {
+      state.vuexCityList = cityList;
     },
-    changeDistrictList(state, n) {
-      state.vuexDistrictList = n;
+    // 获取区
+    changeDistrictList(state, districtList) {
+      state.vuexDistrictList = districtList;
     },
-    changeStreetList(state, n) {
-      state.vuexStreetList = n;
+    // 获取乡镇
+    changeStreetList(state, streetList) {
+      state.vuexStreetList = streetList;
     },
-
-    changeSelectCity(state, n) {
-      state.vuexSelectCity = n;
+    // 城市选择data
+    changeSelectCity(state, cityData) {
+      state.vuexSelectCity = cityData;
     },
-    changeSelectCityName(state, adName) {
-      state.vuexSelectCityName = adName;
+    // 区县选择data
+    changeSelectDistrict(state, districtData) {
+      state.vuexSelectDistrict = districtData;
     },
-    changeSelectDistrict(state, n) {
-      state.vuexSelectDistrict = n;
+    // 乡镇选择data
+    changeSelectStreet(state, streetData) {
+      state.vuexSelectStreet = streetData;
     },
-    changeSelectStreet(state, n) {
-      state.vuexSelectStreet = n;
+    // 改变省市县级联选择获取数据
+    changeParentId(state, n) {
+        state.parentId = n.parentId;
+        state.parentName = n.name;
+        state.mapLevel = n.mapLevel;
     }
-    // addGoods(state, g) {
-    //     state.goods.push(g)
-    // },
-    // delGoods(state, idx) {
-    //     state.goods.splice(idx, 1)
-    // }
   },
   actions: {
-    searchArea(context,name) {
-      searchApi({ parentId: "156052" }).then(res => {
-        console.log(res);
-        console.log(name);
-        // if (name == "city") {
-        //   this.vuexCityList = res.data;
-        // } else if (name == "county") {
-        //   this.vuexDistrictList = res.data;
-        // } else {
-        //   this.cityOptions = res.data;
-        // }
+    // 获取省市县
+    searchArea({ commit }, params = {}) {
+        console.log(params)
+      searchApi({ parentId: params.parentId }).then(res => {
+        if (params.mapLevel == "city") {
+          commit("changeDistrictList", res.data);
+          commit("changeSelectDistrict",{value:params.parentId,label:params.name})
+        } else if (params.mapLevel == "district") {
+          commit("changeStreetList", res.data);
+          commit("changeSelectStreet",{value:params.parentId,label:params.name})
+        } else {
+          commit("changeCityList", res.data);
+          commit("changeSelectCity",{value:params.parentId,label:params.name})
+        }
+        commit("changeParentId", params)
       });
-    }
+    },
 
-    // add({ commit }, g) {
-    //     commit('addGoods', g)
-    // },
-    // del({ commit }, idx) {
-    //     commit('delGoods', idx)
-    // }
   }
 };
 

src/store/getters.js

@@ -7,7 +7,6 @@ const getters = {
     vuexCityList: state => state.addr.vuexCityList,
     vuexDistrictList: state => state.addr.vuexDistrictList,
     vuexStreetList: state => state.addr.vuexStreetList,
-    vuexSelectCityName: state => state.addr.vuexSelectCityName,
     vuexSelectCity: state => state.addr.vuexSelectCity,
     vuexSelectDistrict: state => state.addr.vuexSelectDistrict,
     vuexSelectStreet: state => state.addr.vuexSelectStreet,