diff --git a/src/pages/NewEnergy/NewEnergyOverview/Map.jsx b/src/pages/NewEnergy/NewEnergyOverview/Map.jsx index ef51781..590f241 100644 --- a/src/pages/NewEnergy/NewEnergyOverview/Map.jsx +++ b/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: ` -
-
${e.data.name}
-
${e.data.location}
-
-
慢充占用
${e.data.slow_charge}
-
快充占用
${e.data.fast_charge}
-
所属厂家
${e.data.factory}
-
- `, - }) + + 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: ` + //
+ //
${e.data.name}
+ //
${e.data.location}
+ //
+ //
慢充占用
${e.data.slow_charge}
+ //
快充占用
${e.data.fast_charge}
+ //
所属厂家
${e.data.factory}
+ //
+ // `, + // }) }); - 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) {
{hasInit ? renderChildren(map) : null} + { showInfo&&
+
{info.name}
+
{info.location}
+
+
慢充占用
{info.slow_charge}
+
快充占用
{info.fast_charge}
+
所属厂家
{info.factory}
+
}
); diff --git a/src/pages/NewEnergy/NewEnergyOverview/index.scss b/src/pages/NewEnergy/NewEnergyOverview/index.scss index 9b9e37e..5060a40 100644 --- a/src/pages/NewEnergy/NewEnergyOverview/index.scss +++ b/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; } } - } + } diff --git a/src/pages/NewEnergy/NewEnergyOverview/loadable.jsx b/src/pages/NewEnergy/NewEnergyOverview/loadable.jsx index cc9e8cb..b4274d7 100644 --- a/src/pages/NewEnergy/NewEnergyOverview/loadable.jsx +++ b/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 ( - +