feat():解决新能源点位的问题

src/pages/NewEnergy/NewEnergyOverview/Map.jsx

@@ -17,6 +17,7 @@ function BaseMap(props) {
     setPointData=()=>{},//传给父组件点位
     data=[],
     centerPoint=[],
+    childInfo={}
 
   } = props;
 
@@ -33,8 +34,16 @@ function BaseMap(props) {
 
   const [map, setMap] = useState(null);
   const mapRef = useRef(map);
+  //信息,state与ref一起使用
+  const [info,setInfo]=useState({})
+  const infoRef=useRef(false)
+  // /展示隐藏info,
+  const [showInfo,setShowInfo]=useState(false)
+ 
+  const infoDataRef=useRef({})
   mapRef.current = map;
   const [hasInit, setHasInit] = useState(false); // 地图是否已经创建
+  
   let style = [{
     url: Charge50,
     anchor: new AMap.Pixel(22, 22),
@@ -95,6 +104,7 @@ function BaseMap(props) {
     });
   };
 
+
   useEffect(() => {
     initMap();
 
@@ -102,6 +112,15 @@ function BaseMap(props) {
       // mapRef.current.remove();
     };
   }, []);
+  useEffect(()=>{
+    if(JSON.stringify(childInfo)!="{}"){
+      setInfo(childInfo)
+      infoDataRef.current=childInfo
+      setShowInfo(true)
+      infoRef.current=true
+    }
+  },[childInfo])
+  console.log(info);
 
   useEffect(() => {
     if (map&&data.length!=0) {
@@ -112,28 +131,45 @@ function BaseMap(props) {
         style: style
       });
       var marker = new AMap.Marker({ content: ' ', map: map });
-      console.log(mass);
-      mass.on('mouseover', function (e) {
-
-        marker.setPosition(e.data.lnglat);
-        marker.setLabel({
-          content: `
-          <div class="map-item">
-          <div class="name">${e.data.name}</div>
-          <div class="location"><img src=${mapLocation} title=${e.data.location} />${e.data.location}</div>
-          <div class="pic"><img src=${e.data.pic} /></div>
-          <div class="item"><div>慢充占用</div><div>${e.data.slow_charge}</div></div>
-          <div class="item"><div>快充占用</div><div>${e.data.fast_charge}</div></div>
-          <div class="item"><div>所属厂家</div><div>${e.data.factory}</div></div>
-          </div>
-        `,
-       })
+
+      mass.on('click', function (e) {
+        if(!infoRef.current){
+          setInfo(e.data)
+          infoDataRef.current=e.data
+          setShowInfo(true)
+          infoRef.current=true
+        }else{
+          if(e.data.lnglat.lat==infoDataRef.current.lnglat.lat){
+            setShowInfo(false)
+            infoRef.current=false
+          }else{
+            setInfo(e.data)
+            infoDataRef.current=e.data
+          }
+          
+        }
+        
+
+      //   marker.setPosition(e.data.lnglat);
+      //   marker.setLabel({
+        //   content: `
+        //   <div className="map-item">
+        //   <div className="name">${e.data.name}</div>
+        //   <div className="location"><img src=${mapLocation} title=${e.data.location} />${e.data.location}</div>
+        //   <div className="pic"><img src=${e.data.pic} /></div>
+        //   <div className="item"><div>慢充占用</div><div>${e.data.slow_charge}</div></div>
+        //   <div className="item"><div>快充占用</div><div>${e.data.fast_charge}</div></div>
+        //   <div className="item"><div>所属厂家</div><div>${e.data.factory}</div></div>
+        //   </div>
+        // `,
+      //  })
       });
-      mass.on('mouseout', function (e) {
+      // mass.on('mouseout', function (e) {
 
         // marker.setPosition(e.data.lnglat);
         // marker.setLabel()
-      });
+        
+      // });
       mass.setMap(map);
       //这里经纬度需要注意，data里面的lnglat数据格式不知道为什么给改了
       map.setZoomAndCenter(15, [data[0].lnglat.lng,data[0].lnglat.lat])
@@ -156,6 +192,14 @@ function BaseMap(props) {
       <div>
         <div id="panel"></div>
         {hasInit ? renderChildren(map) : null}
+       {  showInfo&&<div className="map-item">
+            <div className="name">{info.name}</div>
+            <div className="location"><img src={mapLocation} title={info.location} />{info.location}</div>
+            <div className="pic"><img src={info.pic} /></div>
+            <div className="item"><div>慢充占用</div><div>{info.slow_charge}</div></div>
+            <div className="item"><div>快充占用</div><div>{info.fast_charge}</div></div>
+            <div className="item"><div>所属厂家</div><div>{info.factory}</div></div>
+           </div>}
       </div>
     </div>
   );

src/pages/NewEnergy/NewEnergyOverview/index.scss

@@ -70,16 +70,18 @@
         }
     }
   
-    .amap-marker-label{
-        background: linear-gradient(180deg,#1e283c, #293144);
-        border: #1e283c;
-        top: 55px !important;
-        left: -155px !important;
+    
         .map-item{
             color: #fff;
             padding: 20px;
             width: 340px;
-            height: 360px;
+            height: 392px;
+            background: linear-gradient(180deg,#1e283c, #293144);
+            border: #1e283c;
+            top: 62px !important;
+            left: 20px !important;
+            position: absolute;
+            z-index: 1001;
             .name{
                 margin-bottom:8px;
             }
@@ -108,6 +110,6 @@
                 justify-content: space-between;
             }
         }
-    }
+    
     
 }

src/pages/NewEnergy/NewEnergyOverview/loadable.jsx

@@ -11,10 +11,16 @@ function NewEnergyOverview() {
   const [option,setOption]=useState([])
   //中心点经纬度
   const [centerPoint,setCenterPoint]=useState([])
+  const [childInfo,setChildInfo]=useState({})
   const hangChange=(e)=>{
-    console.log(e);
     let arr=[JSON.parse(e).lng,JSON.parse(e).lat]
     setCenterPoint(arr)
+    //获取信息
+    data.map((item)=>{
+      if(item.lnglat.lat==JSON.parse(e).lat&&item.lnglat.lng==JSON.parse(e).lng){
+        setChildInfo(item)
+      }
+    })
   }
   //点位数据
     const getPointData=()=>{
@@ -45,7 +51,7 @@ function NewEnergyOverview() {
   },[data])
   
   return (
-    <BaseMap zoom={10} data={data} centerPoint={centerPoint}  className="overview-map">
+    <BaseMap zoom={10} data={data} centerPoint={centerPoint} childInfo={childInfo}  className="overview-map">
       <div className="search">
       <Select
          showSearch