首页大屏合作社偏移点问题

src/components/GeoMap/CarsMarker.js

@@ -2,6 +2,7 @@ import markerImg from '@/assets/images/screen/map-marker.png';
 import carsImg from '@/assets/images/screen/map-cars.png';
 import videoStartImg from '@/assets/images/screen/map-video-start.png';
 import videoStopImg from '@/assets/images/screen/map-video-stop.png';
+import { useRef } from 'react';
 
 export default function getCarsMarker(AMap, map, opts = {}) {
   const marker = new AMap.Marker({
@@ -11,43 +12,33 @@ export default function getCarsMarker(AMap, map, opts = {}) {
     ...opts,
   });
 
-  //
-  const { machineryId, name, orgName } = opts?.extData;
+  const { machineryId, name, orgName, thumb } = opts?.extData;
 
   marker.setLabel({
     direction: 'top',
-    offset: new AMap.Pixel(0, 0),
+    //偏移单位是px
+    offset: new AMap.Pixel(-88, -180),
     content: `
     <div class="SquareBox-box-carsMarker" onclick="openVideo('${machineryId}')">
-    <div class="border_corner-carsMarker border_corner_left_top-left" ></div>
-    <div class="border_corner-carsMarker border_corner_right_top-right" ></div>
-    <div class="border_corner-carsMarker border_corner_left_bottom-left" ></div>
-    <div class="border_corner-carsMarker border_corner_right_bottom-right" ></div>
-    <div class="SquareBox-body-carsMarker">
-    <div>
-    <div>
-    </div>
-    <div>
-      <div  class="map-top-border">
-        <img class="map-top-cars borderBox" src="${carsImg}" alt="" />
-        <img class="map-top-start borderBox" src="${videoStartImg}" alt="" />
-        <img class="map-top-stop borderBox" src="${videoStopImg}" alt="" />
-      </div>
-
-
-      <div  class="map-button-border">
-      
+      <div class="border_corner-carsMarker border_corner_left_top-left" ></div>
+      <div class="border_corner-carsMarker border_corner_right_top-right" ></div>
+      <div class="border_corner-carsMarker border_corner_left_bottom-left" ></div>
+      <div class="border_corner-carsMarker border_corner_right_bottom-right" ></div>
+      <div class="SquareBox-body-carsMarker">
+        <div  class="map-top-border">
+          <div style="width:100%;text-align:center">
+            <img  class="map-top-cars borderBox" src="${thumb}" alt="" />
+          </div>
+          <img class="map-top-start borderBox" src="${videoStartImg}" alt="" />
+          <img class="map-top-stop borderBox" src="${videoStopImg}" alt="" />
+        </div>
+        <div  class="map-button-border">      
         <div class="carsName">名称：${name}</div>
         <div class="map-button-border-carsRural carsName">
         <div >归属：${orgName}</div>
         <span> \>> </span>
-        </div>
-  
-      </div>
-
-
-    </div>
-  </div> `,
+      </div>   
+    </div> `,
   });
 
   return marker;

src/components/GeoMap/marker.js

@@ -18,7 +18,7 @@ export function useMarker(amapRef, map, list) {
         });
       });
     }
-  }, [map, list]);
+  }, [map, list, amapRef]);
 
   return markerListRef;
 }
@@ -31,5 +31,5 @@ export function useMarkerVisible(map, markerListRef, typeId) {
       const item = marker.getExtData();
       marker.setMap(item.typeId === typeId ? map : null);
     });
-  }, [map, typeId]);
+  }, [map, markerListRef, typeId]);
 }

src/pages/MonitoringScreen/components/List/index.jsx

@@ -15,7 +15,6 @@ export default (props) => {
   });
   const initAutoPlay = useCallback(
     (swiper) => {
-      console.log(swiper);
       if (!children?.length || children?.length <= 3) {
         swiper.autoplay.stop();
       } else {
@@ -45,6 +44,7 @@ export default (props) => {
           initAutoPlay(swiper);
         }}
         className={Styles['list-body']}
+        //因为loop只能在组件初始化时改变所以加一个不让它创建初始化的属性就可以了
         init={false}
         autoplay={{
           delay: 2500,