更换图标及偏移量

src/assets/styles/amap.scss

@@ -22,8 +22,12 @@
     margin-bottom: 5px;
   }
   img {
-    width: 54px;
+    // width: 54px;
+    width: 30px;
   }
+  // .personImg {
+  //   width: 30px;
+  // }
 }
 .amap-info-content {
   background-color: transparent;

src/views/bigScreen/map/index.vue

@@ -4,7 +4,7 @@
  * @Author: JC9527
  * @Date: 2024-01-09 23:08:15
  * @LastEditors: JC9527
- * @LastEditTime: 2024-01-29 09:12:02
+ * @LastEditTime: 2024-01-29 16:28:49
 -->
 <template>
   <div class="map-main">
@@ -50,7 +50,7 @@
       <el-amap-info-window
         v-if="personInfo.visible"
         anchor="bottom-center"
-        :offset="[-10,-93]"
+        :offset="[-10,-40]"
         :closeWhenClickMap="true"
         :position="personInfo.position"
         :visible.sync="personInfo.visible">
@@ -66,21 +66,21 @@
                 <div class="dot"></div>
                 <div class="name">姓名：</div>
               </div>
-              <div class="position">{{ personInfo.info.userName }}</div>
+              <div class="position">{{ personInfo.info.userName || "-" }}</div>
             </div>
             <div class="person-info">
               <div class="info-left">
                 <div class="dot"></div>
                 <div class="name">联系方式：</div>
               </div>
-              <div class="position">{{ personInfo.personinfo.phonenumber }}</div>
+              <div class="position">{{ personInfo.personinfo ? personInfo.personinfo.phonenumber : "-" }}</div>
             </div>
             <div class="person-info">
               <div class="info-left">
                 <div class="dot"></div>
                 <div class="name">所属部门：</div>
               </div>
-              <div class="position">{{ personInfo.personinfo.deptName }}</div>
+              <div class="position">{{ personInfo.personinfo ? personInfo.personinfo.deptName : "-" }}</div>
             </div>
             <div class="person-info">
               <div class="info-left">
@@ -94,7 +94,7 @@
                 <div class="dot"></div>
                 <div class="name">所属围栏：</div>
               </div>
-              <div class="position">{{ personInfo.personinfo.fenceName || '-' }}</div>
+              <div class="position">{{ personInfo.personinfo ? personInfo.personinfo.fenceName : '-' }}</div>
             </div>
             <div class="person-info">
               <div class="info-left">
@@ -117,7 +117,7 @@
       <!-- 事件弹框 -->
       <el-amap-info-window
         v-if="eventInfo.visible"
-        :offset="[-10,-113]"
+        :offset="[-10,-10]"
         :closeWhenClickMap="true"
         :position="eventInfo.position"
         :visible.sync="eventInfo.visible"
@@ -159,7 +159,7 @@
       <!-- 执法车辆弹框 -->
       <el-amap-info-window
         v-if="carInfo.visible"
-        :offset="[-10,-148]"
+        :offset="[-10,-40]"
         :closeWhenClickMap="true"
         :position="carInfo.position"
         :visible.sync="carInfo.visible"
@@ -184,7 +184,7 @@
       <!-- 监控视频弹框 -->
       <el-amap-info-window
         v-if="monitoringInfo.visible"
-        :offset="[-10,-94]"
+        :offset="[-10,-10]"
         :closeWhenClickMap="true"
         :position="monitoringInfo.position"
         :visible.sync="monitoringInfo.visible"
@@ -230,7 +230,7 @@
       <!-- 沿街商铺分布 -->
       <el-amap-info-window
         v-if="shopInfo.visible"
-        :offset="[-10,-94]"
+        :offset="[-10,-10]"
         :closeWhenClickMap="true"
         :position="shopInfo.position"
         :visible.sync="shopInfo.visible"
@@ -897,6 +897,8 @@ export default {
           } else {
             this.componentMarker.visible = true;
             if(zoom < 13.2) {
+              this.layers.layer.show();
+              this.layers.text.show();
               if(zoom < 12) {
                 this.unlightedPolygonId()
               }
@@ -905,6 +907,10 @@ export default {
                 this.isPositioning = false;
               }
             } else if(zoom > 13.2){
+              this.layers.layer.hide();
+              this.layers.text.hide();
+              this.layers.text1.show();
+              this.layers.layer3.show();
               if(zoom > 14) {
                 this.layers.text1.show();
                 this.layers.layer3.show();
@@ -928,19 +934,21 @@ export default {
         imgSrc = context.data[0].imgSrc == '1' ? require("../../../assets/images/icon/icon1.png") : require("../../../assets/images/icon/offLine1.png")
       }
       var content = `<div class="markerStyles"><div class="marker-Text" style="width:${context.data[0].text.length * 15}px">${context.data[0].text}</div><img src="${imgSrc}" alt=""></div>`;
-      var offset = new AMap.Pixel(-27, -94);
+      var offset = new AMap.Pixel(-30.5, -48.5);
       context.marker.setContent(content);
       context.marker.setOffset(offset);
-      let obj = {};
-      obj.markers = context.marker;
-      obj.imei = context.data[0].info.imei;
-      this.personMarkers.push(obj)
+      // let obj = {};
+      // obj.markers = context.marker;
+      // obj.imei = context.data[0].info.imei;
+      // this.personMarkers.push(obj)
       context.marker.on('click',(ev)=>{
         // 根据imei获取人员信息
         getUserByImei({imei:context.data[0].info.imei}).then(res=>{
+          console.log(res,"获取人员信息");
           if(res.code == 200) {
             this.personInfo.position = context.data[0].position;
             this.personInfo.info = context.data[0].info;
+            console.log(res.data[0],"res.data[0]");
             this.personInfo.personinfo = res.data[0];
             this.personInfo.visible = true;
           }
@@ -950,7 +958,7 @@ export default {
     // 事件的非聚合自定义样式及点击事件
     _eventMarker (context) {
       var content = `<div class="markerStyles"><img src="${require("../../../assets/images/icon/icon2.png")}" alt=""></div>`;
-      var offset = new AMap.Pixel(-27, -94);
+      var offset = new AMap.Pixel(-13, -16);
       context.marker.setContent(content)
       context.marker.setOffset(offset)
       context.marker.on('click',(ev)=>{
@@ -962,7 +970,7 @@ export default {
     // 视频非聚合自定义样式及点击事件
     _renderMarker (context) {
       var content = `<div class="markerStyles"><img src="${context.data[0].info.status == 1 ? require("../../../assets/images/icon/icon5.png") : require("../../../assets/images/icon/offLine4.png")}" alt=""></div>`;
-      var offset = new AMap.Pixel(-27, -94);
+      var offset = new AMap.Pixel(-13.5, -15);
       context.marker.setContent(content)
       context.marker.setOffset(offset)
       context.marker.on('click',(ev)=>{
@@ -973,8 +981,9 @@ export default {
     },
     // 店铺非聚合自定义样式及点击事件
     _DrenderMarker(context) {
-      var content = `<div class="markerStyles"><div class="marker-Text" style="width:${context.data[0].info.shopName.length * 15}px">${context.data[0].info.shopName}</div><img src="${require("../../../assets/images/icon/icon6.png")}" alt=""></div>`;
-      var offset = new AMap.Pixel(-27, -94);
+      // <div class="marker-Text" style="width:${context.data[0].info.shopName.length * 15}px">${context.data[0].info.shopName}</div>
+      var content = `<div class="markerStyles"><img src="${require("../../../assets/images/icon/icon6.png")}" alt=""></div>`;
+      var offset = new AMap.Pixel(-13.5, -15);
       context.marker.setContent(content)
       context.marker.setOffset(offset);
       context.marker.on('click',(ev)=>{
@@ -1049,9 +1058,9 @@ export default {
             // console.log(this.count,'this.count');
             AMap.plugin(['AMap.MarkerCluster'],()=>{
               this.cluster = new AMap.MarkerCluster(this.map,videoPoint,{
-                gridSize: 20, // 设置网格像素大小
+                gridSize: 60, // 设置网格像素大小
                 styles: sts,
-                maxZoom: 17,
+                maxZoom: 15,
                 // renderClusterMarker: this._renderClusterMarker, // 自定义聚合点样式
                 renderMarker: this._personRenderMarker, // 自定义非聚合点样式
               })
@@ -1092,7 +1101,7 @@ export default {
             this.count = videoPoint.length;
             AMap.plugin(['AMap.MarkerCluster'],()=>{
               this.cluster = new AMap.MarkerCluster(this.map,videoPoint,{
-                gridSize: 20, // 设置网格像素大小
+                gridSize: 60, // 设置网格像素大小
                 maxZoom: 17,
                 styles: sts,
                 // renderClusterMarker: this._renderClusterMarker, // 自定义聚合点样式
@@ -1132,8 +1141,8 @@ export default {
           this.count = videoPoint.length;
           AMap.plugin(['AMap.MarkerCluster'],()=>{
             this.cluster = new AMap.MarkerCluster(this.map,videoPoint,{
-              gridSize: 20, // 设置网格像素大小
-              maxZoom: 17,
+              gridSize: 60, // 设置网格像素大小
+              maxZoom: 15,
               styles: sts,
               // renderClusterMarker: this._renderClusterMarker, // 自定义聚合点样式
               renderMarker: this._renderMarker, // 自定义非聚合点样式
@@ -1175,7 +1184,7 @@ export default {
             this.cluster = new AMap.MarkerCluster(this.map,videoPoint,{
               gridSize: 60, // 设置网格像素大小
               styles: sts,
-              maxZoom: 17,
+              maxZoom: 15,
               // renderClusterMarker: this._renderClusterMarker, // 自定义聚合点样式
               renderMarker: this._DrenderMarker, // 自定义非聚合点样式
             })
@@ -1301,7 +1310,7 @@ export default {
     },
     // 执法人员强制观摩
     watchClick(){
-      if(this.personInfo.status == 1) {
+      if(this.personInfo.info.status == "1") {
         this.showVideo = true;
         videoSurveillance({...this.videoCondition,destID:this.personInfo.info.userId,imei:this.personInfo.info.imei}).then(res=>{
           if(res.code == 200 && res.data.msg == '操作成功') {
@@ -2296,6 +2305,7 @@ export default {
     },
     // 搜索数据
     querySearch(queryString, cb){
+      this.input = queryString;
       // 执法人员搜索
       if(this.actionMap == 1) {
         dwgjList({name:queryString}).then(res=>{
@@ -2389,9 +2399,9 @@ export default {
       if (id == 1) {
         this.markerOffset = new AMap.Pixel(-35, -123);
       } else if (id == 2) {
-        this.markerOffset = new AMap.Pixel(-27, -113);
+        this.markerOffset = new AMap.Pixel(-13.5, -15);
       } else if (id == 3) {
-        this.markerOffset = new AMap.Pixel(-35, -148);
+        this.markerOffset = new AMap.Pixel(-30.5, -48.5);
       } else if (id == 4) {
         this.MyInput = false;
         this.markerOffset = new AMap.Pixel(-27, -94);