小班点击显示

src/components/amap.vue

@@ -172,40 +172,39 @@ export default {
       deep: true,
       immediate: true,
       handler: function (val, oldVal) {
-        let smallArr = [];
-        smallArr = val;
-        if (smallArr != 0) {
-          if (smallArr.longitude && smallArr.latitude) {
-            let lanLatArr = [smallArr.longitude, smallArr.latitude];
+        console.log(val);
+        if (val) {
+          if (val.longitude && val.latitude && !val.name) {
+            let lanLatArr = [val.longitude, val.latitude];
             let smallLabel =
               "<div class='info-small'>" +
               "<h5 class='marker-title'>" +
-              smallArr.countyName +
+              val.countyName +
               '-' +
-              smallArr.smallNumber +
+              val.smallNumber +
               '</h5>' +
               "<div class='marker-content'>" +
               '<p>小班号：' +
-              smallArr.smallNumber +
+              val.smallNumber +
               '</p>' +
               '<p>样地数：' +
-              smallArr.sampleCount +
+              val.sampleCount +
               '</p>' +
               '<p>小班蓄积量：' +
-              smallArr.smallClassStock +
+              val.smallClassStock +
               '(立方米)' +
               '</p>' +
               '<p>小班占地面积：' +
-              smallArr.landArea +
+              val.landArea +
               '(亩)' +
               '</p>' +
               '<p>小班树种组成：' +
-              smallArr.treeComp +
+              val.treeComp +
               '</p>' +
               '<p>所在位置：' +
-              smallArr.cityName +
-              smallArr.countyName +
-              smallArr.townName;
+              val.cityName +
+              val.countyName +
+              val.townName;
             '</p>' + '</div>' + '</div>';
             this.smallMarker = new AMap.Marker({
               position: lanLatArr,
@@ -220,8 +219,15 @@ export default {
             });
             // this.smallMarker.setMap(this.map);
             this.map.add(this.smallMarker);
+          } else if(val.name == false && this.smallMarker){
+            this.map.remove(this.smallMarker);
           }
         }
+
+        // if (val == '123') {
+        //   console.log('caozuo');
+        //   this.map.remove(this.smallMarker);
+        // }
       }
     }
   },

src/views/index.vue

@@ -3,7 +3,7 @@
  * @Author: wangcc
  * @Date: 2022-07-06 15:56:45
  * @LastEditors: wangcc
- * @LastEditTime: 2022-07-06 16:04:04
+ * @LastEditTime: 2022-07-06 16:49:54
  * @FilePath: \castgroup_bigscreen\src\views\index.vue
  * @Copyright: Copyright (c) 2016~2022 by wangcc, All Rights Reserved. 
 -->
@@ -137,7 +137,7 @@
             <i class="el-icon-search el-input__icon" slot="suffix" @click="xiaobansearch"></i>
           </el-input>
         </div>
-        <section v-if="showxiaoban||showbase" class="scroll-board-wrap" :class="{close:showScrollBoard==true}">
+        <section v-if="showxiaoban||showbase" class="scroll-board-wrap" :class="{close:showScrollBoard==true}" @mouseout="scrollOut">
           <dv-scroll-board
             v-if="showbase"
             :key="scrollBoardKey"
@@ -152,7 +152,8 @@
             class="scroll-board-01"
             :config="scrollBoardConfig"
             ref="scrollBoard"
-            @mouseover="scrollBoardClick"
+            @click="scrollBoardClick"
+            @mouseout="scrollOut"
             :style="scrollBoardStyle"
           />
           <div class="scroll-board-tool" @click="toggleShowScrollBoard">
@@ -1044,8 +1045,12 @@ export default {
         this.changeSearchSmallClass(res.data);
       });
     },
+    scrollOut() {
+      this.changeSearchSmallClass({name:false});
+    },
     scrollBaseListClick(e){
       console.log('scrollBaseListClick',e);
+      
     },
     toggleShowScrollBoard() {
       this.showScrollBoard = !this.showScrollBoard;