地图

src/views/books/index.vue

@@ -1,6 +1,11 @@
 <template>
   <div>
-    <div class="map" id="map" :style="{'height':mapHeight+'px'}"></div>
+    <div class="map" id="map" :style="{'height':mapHeight+'px'}">
+      <div class="tabs">
+        <div :class="!addCur?'tabcur':''" @click="changeMask(1)">抢险队伍</div>
+        <div :class="addCur?'tabcur':''" @click="changeMask(2)">防汛仓库</div>
+      </div>
+    </div>
     <div ref='infoWindow' id="infoWindow">
       <div class="iconClose">
         <i @click='closeWin' class="el-icon-close"></i>
@@ -65,13 +70,18 @@
         center: [120.585294, 31.299758],
         mapHeight: 0,
         map: null,
-        makerList: [],
+        markerList: [],
+        makerObj: {
+          teams: [],
+          storages: []
+        },
         infoWindow: null,
         openData: [],
-        mapList: [],
         materList: [],
         loading: true,
         total: 0,
+        addCur: false,
+        loadingFull:null,
         table: [{
             label: '序号',
             type: 'index',
@@ -207,6 +217,12 @@
         this.mapHeight = winHeight - 50 - 20
       },
       mapInit() {
+        this.loadingFull = this.$loading({
+          lock: true,
+          text: '',
+          spinner: 'el-icon-loading',
+          background: 'rgba(0, 0, 0, 0.7)'
+        });
         this.map = new AMap.Map("map", {
           center: this.center,
           mapStyle: "amap://styles/bfb1bb3feb0db7082367abca96b8d214", // 设置地图的显示样式
@@ -226,6 +242,15 @@
         this.getStorages()
         // this.setMapMarker()
       },
+      changeMask(type) {
+        if (type == 1) {
+          this.addCur = false
+          this.setMapMarker("teams", this.makerObj.teams)
+        } else if (type == 2) {
+          this.addCur = true
+          this.setMapMarker("storages", this.makerObj.storages)
+        }
+      },
       async getTeams() {
         await index({
           page: 1,
@@ -237,18 +262,14 @@
             return
           }
           res.data.map(item => {
-            this.mapList.push({
+            this.makerObj.teams.push({
               type: 'teams',
               name: item.mingcheng,
               ...item
             })
           })
-          this.setMapMarker()
-          // this.mapList = res.data
-
+          this.setMapMarker("teams", this.makerObj.teams)
         })
-        // this.list = res.data
-
       },
       async getStorages() {
         await index({
@@ -261,15 +282,14 @@
             return
           }
           res.data.map(item => {
-            this.mapList.push({
+            this.makerObj.storages.push({
               type: 'storages',
               name: item.cangkumingcheng,
               ...item
             })
           })
-          this.setMapMarker()
+          this.loadingFull.close();
         })
-        // this.list = res.data
       },
       async getMater(id) {
 
@@ -288,9 +308,12 @@
         this.loading = false
       },
       // 增加点位
-      setMapMarker() {
+      setMapMarker(type, arr) {
         var that = this
-        this.mapList.forEach((item, index) => {
+        console.log(type, arr)
+        this.markerList.forEach(marker => marker.setMap(null));
+        this.markerList = []
+        arr.forEach((item, index) => {
           // 遍历生成多个标记
           if (!item.jingdu || !item.weidu) {
             return
@@ -321,11 +344,16 @@
               }
             }
             this.infoWindow.open(this.map, e.target.getPosition())
-            }),
-            this.makerList.push(marker)
+          })
+          // if(item.type == 'storages'){
+          //    this.makerObj.storages.push(marker)
+          // }else{
+          //   this.makerObj.teams.push(marker)
+          // }
+          this.markerList.push(marker)
         });
-        console.log("this.makerList", this.makerList)
-        this.map.add(this.makerList)
+        console.log("this.makerObj", this.makerObj)
+        // this.map.add(this.makerObj['teams'])
       },
       closeWin() {
 
@@ -336,6 +364,37 @@
 </script>
 
 <style>
+  .tabs {
+    position: absolute;
+    z-index: 99;
+    top: 20px;
+    right: 20px;
+    display: flex;
+    align-items: center;
+  }
+
+  .tabs>div {
+    padding: 10px 20px;
+    font-size: 16px;
+    background-color: #fff;
+    color: #333;
+  }
+
+  .tabs>div:first-child {
+    border-radius: 20px 0 0 20px;
+
+  }
+
+  .tabs>div:last-child {
+    border-radius: 0 20px 20px 0;
+
+  }
+
+  .tabs>div.tabcur {
+    background: #0077CC;
+    color: #fff
+  }
+
   #infoWindow {
     position: relative;
   }