地图开发

src/components/amap.vue

@@ -13,6 +13,7 @@ export default {
       AMap: null,
       map: null,
       lngLat: [106.628201, 26.646694],
+      adName: '',
       zoom: 8,
       adcode: '贵州省',
       mapLevel: 'province',
@@ -23,6 +24,7 @@ export default {
       currentAreaNode: null
     };
   },
+
   mounted() {
     // this.initMAp();
     this.initAMap();
@@ -48,10 +50,15 @@ export default {
         _this.map = new AMap.Map('container', {
           //设置地图容器id
           viewMode: '3D', //是否为3D地图模式
+          terrain: true,
           zoom: _this.zoom, //初始化地图级别
           center: _this.lngLat, //初始化地图中心点位置
           pitch: 30,
-          layers: [new AMap.TileLayer.Satellite(), new AMap.TileLayer.RoadNet()]
+          layers: [
+            new AMap.TileLayer.Satellite(),
+            new AMap.TileLayer.RoadNet()
+          ],
+          features: ['road', 'bg', 'building'] //地图要素
         });
         AMapUI.load(
           ['ui/geo/DistrictExplorer', 'lib/$'],
@@ -59,12 +66,12 @@ export default {
             _this.loadMapData(DistrictExplorer, $);
           }
         );
-        this.$nextTick(() => {
-          // this.getDistrict()
-        });
+        // this.$nextTick(() => {
+        //   // this.getDistrict()
+        // });
       });
     },
-    getDistrict(adName,mapLevel) {
+    getDistrict(adName, mapLevel) {
       let that = this;
       AMap.plugin(['AMap.DistrictSearch'], function () {
         var district = new AMap.DistrictSearch({
@@ -76,7 +83,6 @@ export default {
           subdistrict: 1
         });
         district.search(adName, function (status, result) {
-          console.log(result);
           var outer = [
             new AMap.LngLat(-360, 90, true),
             new AMap.LngLat(-360, -90, true),
@@ -145,20 +151,25 @@ export default {
           );
         }
       );
+      //监听鼠标在feature上滑动
+      this.districtExplorer.on('featureMousemove', (e) => {
+        //更新提示位置
+        this.tipMarker.setPosition(e.originalEvent.lnglat);
+      });
       var adName = that.adcode; //贵州省
       var mapLevel = that.mapLevel;
-      var adcode = '520000'
+      var adcode = '520000';
       //feature被点击
       this.districtExplorer.on('featureClick', (e, feature) => {
         that.map.clearMap();
         const props = feature.properties;
         this.switch2AreaNode(props.adcode);
-        mapLevel = props.level
-        adName = props.name
-        that.getDistrict(adName,mapLevel)
+        mapLevel = props.level;
+        adName = props.name;
+        that.getDistrict(adName, mapLevel);
       });
       this.switch2AreaNode(adcode);
-      that.getDistrict(adName,mapLevel)
+      that.getDistrict(adName, mapLevel);
     },
     //根据Hover状态设置相关样式
     toggleHoverFeature(feature, isHover, position) {
@@ -274,4 +285,45 @@ export default {
     z-index: auto;
   }
 }
+/deep/ .amap-marker-content {
+  .tipMarker {
+    color: #555;
+    background-color: rgba(255, 254, 239, 0.8);
+    border: 1px solid #7e7e7e;
+    padding: 2px 6px;
+    font-size: 12px;
+    white-space: nowrap;
+    display: inline-block;
+    &:before,
+    &:after {
+      content: '';
+      display: block;
+      position: absolute;
+      margin: auto;
+      width: 0;
+      height: 0;
+      border: solid transparent;
+      border-width: 5px 5px;
+    }
+    &.top {
+      transform: translate(-50%, -110%);
+      &:before,
+      &:after {
+        bottom: -9px;
+        left: 0;
+        right: 0;
+        border-top-color: rgba(255, 254, 239, 0.8);
+      }
+      &:before {
+        bottom: -10px;
+        border-top-color: #7e7e7e;
+      }
+    }
+  }
+}
+/deep/ .amap-logo,
+.amap-copyright {
+  display: block !important;
+  visibility: inherit !important;
+}
 </style>

src/components/map.vue

@@ -129,7 +129,7 @@ export default {
             layers: [
               new AMap.TileLayer.Satellite(),
               new AMap.TileLayer.RoadNet()
-            ]
+            ],
             // mapStyle: 'amap://styles/db9efe6a1745ac24b7269b862f359536'
           });
           this.$nextTick(() => {

src/components/pickerAddr.vue

@@ -1,108 +1,92 @@
 <!--
- * @LastEditors: gcz
+ * @LastEditors: wangcc
 -->
 <template>
   <div class="pickerAddr u-flex">
-
     <div class="select-wrap">
-        市：
-      <el-select v-model="selectCity" placeholder="请选择" @change="cityChange">
+      市：
+      <el-select v-model="selectCity" placeholder="请选择" @change="cityChange($event,'city')">
         <el-option
           v-for="item in vuexCityList"
           :key="item.value"
           :label="item.label"
-          :value="item.value"
-        >
-        </el-option>
+          :value="{value:item.value,label:item.label}"
+        ></el-option>
       </el-select>
     </div>
     <div class="select-wrap">
-        县：
-      <el-select v-model="selectDistrict" placeholder="请选择" @change="districtChange">
+      县：
+      <el-select v-model="selectDistrict" placeholder="请选择" @change="cityChange($event,'county')">
         <el-option
           v-for="item in vuexDistrictList"
           :key="item.value"
           :label="item.label"
-          :value="item.value"
-        >
-        </el-option>
+          :value="{value:item.value,label:item.label}"
+        ></el-option>
       </el-select>
     </div>
     <div class="select-wrap">
-        乡：
-      <el-select v-model="selectStreet" placeholder="请选择" @change="streetChange">
+      乡：
+      <el-select v-model="selectStreet" placeholder="请选择" >
         <el-option
           v-for="item in vuexStreetList"
           :key="item.value"
           :label="item.label"
-          :value="item.value"
-        >
-        </el-option>
+          :value="{value:item.value,label:item.label}"
+        ></el-option>
       </el-select>
     </div>
-
   </div>
 </template>
 
 <script>
-import {mapMutations, mapGetters} from 'vuex';
+// import { mapMutations, mapGetters } from 'vuex';
+import { searchApi } from "@/service/index.js";
 export default {
-  name: "",
+  name: '',
   components: {},
   data() {
     return {
-      selectCity: '',
+      selectCity:'',
       selectDistrict: '',
       selectStreet: '',
-      options: [
-        {
-          value: "选项1",
-          label: "黄金糕",
-        },
-        {
-          value: "选项2",
-          label: "双皮奶",
-        },
-        {
-          value: "选项3",
-          label: "蚵仔煎",
-        },
-        {
-          value: "选项4",
-          label: "龙须面",
-        },
-        {
-          value: "选项5",
-          label: "北京烤鸭",
-        },
-      ],
-      value: "",
+      vuexCityList:[],
+      vuexDistrictList:[],
+      vuexStreetList: [],
+      value: '',
+      parentId:''
     };
   },
-  computed: {
-      // 引入getters中的计算属性，需要在 computed 中引入
-      ...mapGetters(['vuexCityList','vuexDistrictList','vuexStreetList'])
-  },
+  // computed: {
+  //   // 引入getters中的计算属性，需要在 computed 中引入
+  //   ...mapGetters(['vuexCityList', 'vuexDistrictList', 'vuexStreetList'])
+  // },
   created() {
-    // console.log('this',this);
-    // console.log('vuexCityList',this.vuexCityList);
+    this.searchArea()
   },
   methods: {
-    ...mapMutations(['changeSelectCity','changeSelectDistrict','changeSelectStreet']),
-    cityChange(e){
-      // console.log('cityChange',e);
-      this.changeSelectCity(e)
-    },
-    districtChange(e){
-      // console.log('districtChange',e);
-      this.changeSelectDistrict(e);
-      // console.log('vuexSelectDistrict',this.vuexSelectDistrict);
+    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;
+        }
+      });
     },
-    streetChange(e){
-      console.log('streetChange',e);
-      this.changeSelectStreet(e)
+    cityChange(e,name) {
+      if (!val) {
+        this.searchArea(name);
+      } else {
+        this.parentId = val;
+        this.searchArea(name);
+      }
     },
-  },
+  }
 };
 </script>
 
@@ -110,19 +94,19 @@ export default {
 .pickerAddr {
   text-align: right;
   margin-bottom: 1vh;
-  .select-wrap:not(:last-of-type){
-      margin-right: 10px;
+  .select-wrap:not(:last-of-type) {
+    margin-right: 10px;
   }
-  .el-select{
-      width: 8vw;
-      /deep/ .el-input__inner{
-        color: rgba(255, 255, 255,1);
-        background: rgba(38, 80, 179,.5);
-        border: 2px solid rgba(38, 80, 179,1);
-        &::-webkit-input-placeholder{
-          color: #eee;
-        }
+  .el-select {
+    width: 8vw;
+    /deep/ .el-input__inner {
+      color: rgba(255, 255, 255, 1);
+      background: rgba(38, 80, 179, 0.5);
+      border: 2px solid rgba(38, 80, 179, 1);
+      &::-webkit-input-placeholder {
+        color: #eee;
       }
+    }
   }
 }
 </style>

src/service/index.js

@@ -19,7 +19,13 @@ export const alarmDataApi = () =>
         url: 'event/latest',
         prefixUrl: 'api2',
     })
-
+// 查询省市县
+export const searchApi = (data) =>
+    callApi({
+        url: 'smallClass/area',
+        data,
+        prefixUrl: 'api2',
+    })
 // export const page6numerical = () =>
 //     callApi({
 //         url: 'event/statis',

src/store/addr/index.js

@@ -1,51 +1,70 @@
 /*
  * @LastEditors: gcz
  */
+
 const addr = {
-    state: {
-        vuexSelectCity: '',
-        vuexSelectDistrict: '',
-        vuexSelectStreet: '',
+  state: {
+    parentId: "156052",
+    vuexSelectCity: "",
+    vuexSelectDistrict: "",
+    vuexSelectStreet: "",
 
-        vuexCityList: [],
-        vuexDistrictList: [],
-        vuexStreetList: [],
+    vuexCityList: [],
+    vuexDistrictList: [],
+    vuexStreetList: []
+  },
+  mutations: {
+    changeCityList(state, t) {
+      state.vuexCityList = t;
+    },
+    changeDistrictList(state, n) {
+      state.vuexDistrictList = n;
+    },
+    changeStreetList(state, n) {
+      state.vuexStreetList = n;
     },
-    mutations: {
-        changeCityList(state, t) {
-            state.vuexCityList = t
-        },
-        changeDistrictList(state, n) {
-            state.vuexDistrictList = n
-        },
-        changeStreetList(state, n) {
-            state.vuexStreetList = n
-        },
 
-        changeSelectCity(state, n) {
-            state.vuexSelectCity = n
-        },
-        changeSelectDistrict(state, n) {
-            state.vuexSelectDistrict = n
-        },
-        changeSelectStreet(state, n) {
-            state.vuexSelectStreet = n
-        },
-        // addGoods(state, g) {
-        //     state.goods.push(g)
-        // },
-        // delGoods(state, idx) {
-        //     state.goods.splice(idx, 1)
-        // }
+    changeSelectCity(state, n) {
+      state.vuexSelectCity = n;
     },
-    actions: {
-        // add({ commit }, g) {
-        //     commit('addGoods', g)
-        // },
-        // del({ commit }, idx) {
-        //     commit('delGoods', idx)
+    changeSelectCityName(state, adName) {
+      state.vuexSelectCityName = adName;
+    },
+    changeSelectDistrict(state, n) {
+      state.vuexSelectDistrict = n;
+    },
+    changeSelectStreet(state, n) {
+      state.vuexSelectStreet = n;
+    }
+    // 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;
         // }
+      });
     }
-}
 
-export default addr
+    // add({ commit }, g) {
+    //     commit('addGoods', g)
+    // },
+    // del({ commit }, idx) {
+    //     commit('delGoods', idx)
+    // }
+  }
+};
+
+export default addr;

src/store/getters.js

@@ -7,7 +7,7 @@ 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,