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}
-
-
- `,
- })
+
+ 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}
+ //
+ //
+ // `,
+ // })
});
- 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}
+
+
+
+
+
}
);
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 (
-
+