diff --git a/src/assets/css/custom.css b/src/assets/css/custom.css
index 75d7c17d..f1812b1d 100644
--- a/src/assets/css/custom.css
+++ b/src/assets/css/custom.css
@@ -415,10 +415,12 @@ h1.logo span{display:block;color:#f4f4f4;font-weight:bold;letter-spacing:2px;fon
.tooltip-box .arrow {position:absolute;bottom:-10px;left:50%;transform: translateX(-50%);display:block;width: 0px;height: 0px;border-top:10px solid #283046;border-bottom:10px solid none;border-right: 10px solid transparent;border-left: 10px solid transparent;}
/* 데이터블록 */
-.dblock-box{background:#283046;padding:10px;border-radius:6px;position:absolute;}
-.dblock-box div{text-align:left;font-size:10px;color:#bbb;}
-.dblock-ti span, .block-txt .ti{color:#f4f4f4;font-weight:500;display:block;}
+.dblock-box{background:#283046;padding:10px;border-radius:6px;position:absolute;max-width: 250px;}
+.dblock-box div{text-align:left;font-size:13px;color:#bbb;}
+.dblock-ti{border-bottom:1px solid #bbb;padding-bottom:4px;}
+.dblock-ti span, .dblock-txt .ti{color:#f4f4f4;font-weight:500;display:block;}
.dblock-txt{padding-top:4px;}
+.dblock-txt-list + .dblock-txt-list{margin-top:4px;}
/*회원가입*/
.pal-register .auth-wrapper.auth-v1 .auth-inner{max-width:1200px;}
diff --git a/src/components/map/naver/dron/DronMarker.js b/src/components/map/naver/dron/DronMarker.js
index 522f20e4..5080460d 100644
--- a/src/components/map/naver/dron/DronMarker.js
+++ b/src/components/map/naver/dron/DronMarker.js
@@ -16,15 +16,73 @@ export const DronMarker = props => {
const { objectId, isClickObject } = useSelector(state => state.controlMapReducer);
const [arrMarkers, setArrMarkers] = useState([]);
- const [arrInfos, setArrInfos] = useState([]);
+ // const [arrInfos, setArrInfos] = useState([]);
let naver = props.naver;
let map = props.map;
let CustomOverlay;
- useEffect(() => {
- if(arrMarkers.length != 0) markerInfo();
- }, [arrMarkers])
+ let infoWindow;
+ const infowindowOpen = (data) => {
+
+ const content = `
+
+
+ ${data?.id}
+
+
+
+ ${data?.speed}${data?.speedType} | ${data?.elev}${data?.elevType} | ${data?.heading}
+ ${data?.coord._lat} | ${data?.coord._lng}
+
+
+
+
+ `;
+
+ //
+ //
+ // ${data?.id}
+ //
+ //
+ //
+ // 속도: ${data?.speed}${data?.speedType}
+ //
+ //
+ // 고도: ${data?.elev}${data?.elevType}
+ //
+ //
+ // 헤딩방향: ${data?.heading}
+ //
+ //
+ // 위치: ${data?.coord._lat} | ${data?.coord._lng}
+ //
+ //
+ //
+ //
+
+ infoWindow = new naver.maps.InfoWindow({
+ class: 'tooltip-dblock',
+ content: content,
+ maxWidth: 140,
+ backgroundColor: '#283046', //박스안쪽영역 컬러
+ // borderColor: '#333', //테두리컬러
+ // borderWidth: 3, //테두리 굵기
+ // anchorSize: new naver.maps.Size(30, -10),
+ anchorSkew: false,
+ anchorColor: '#283046',
+
+ pixelOffset: new naver.maps.Point(20, -20)
+ });
+
+ infoWindow.open(props.map, data.coord);
+ }
+
+ // useEffect(() => {
+ // if(arrMarkers.length != 0) markerInfo();
+ // }, [arrMarkers])
useEffect(() => {
@@ -82,8 +140,9 @@ export const DronMarker = props => {
}, [objectId]);
//마커를 그린다.
- const addMarkers = (position, id, controlId) => {
- let marker = new naver.maps.Marker({
+ const addMarkers = (position, id, controlId, gps) => {
+ // console.log(gps, '>>>.')
+ const marker = new naver.maps.Marker({
position: position,
title: id,
id: id,
@@ -97,19 +156,48 @@ export const DronMarker = props => {
// size: new naver.maps.Size(50, 50),
origin: new naver.maps.Point(0, 0),
anchor: new naver.maps.Point(15, 15),
- }
+ },
+ gps: gps
});
marker.setMap(props.map);
// drone 정보 창
naver.maps.Event.addListener(marker, 'click', function (e) {
handlerDronClick(marker.controlId, marker.id);
+
});
+
+ naver.maps.Event.addListener(marker, 'mouseover', function(e) {
+ // // handlerDronMouseOver(marker);
+
+ const data = {};
+ data.id = marker.id;
+ // data.lat = marker.position._lat;
+ // data.lng = marker.position._lng;
+ data.speed = marker.gps?.speed;
+ data.speedType = marker.gps?.speedType;
+ data.elev = marker.gps?.elev;
+ data.elevType = marker.gps?.elevType;
+ data.heading = marker.gps?.heading;
+ data.coord = marker.position;
+
+ infowindowOpen(data);
+ })
+
+ naver.maps.Event.addListener(marker, 'mouseout', function(e) {
+ if (infoWindow) {
+ infoWindow.close();
+ }
+ })
setArrMarkers(m => [...m, marker]);
// markerInfo(marker, position, id);
};
+ const handlerDronMouseOver = (marker) => {
+
+ }
+
const handlerDronClick = (controlId, idntfNum) => {
// const idntfNum = marker.id;
// const contorlId = marker.controlId;
@@ -141,9 +229,9 @@ export const DronMarker = props => {
marker.setPosition(position);
};
- const moveInfos = (info, position) => {
- if(info) {
- info.setPosition(position, info);
+ const moveInfos = (info, position) => {
+ if(info) {
+ info.setPosition(position, info);
}
};
@@ -166,20 +254,20 @@ export const DronMarker = props => {
}
});
- arrInfos.map(info => {
- const isExists = arrMarkers.find(
- marker => marker.id === info._id
- );
- if (!isExists) {
- removeInfos(info);
- const arrData = arrInfos.filter(
- item => item.id != info._id
- );
- removeArrInfos(arrData);
-
- // dispatch(objectUnClickAction());
- }
- });
+ // arrInfos.map(info => {
+ // const isExists = arrMarkers.find(
+ // marker => marker.id === info._id
+ // );
+ // if (!isExists) {
+ // removeInfos(info);
+ // const arrData = arrInfos.filter(
+ // item => item.id != info._id
+ // );
+ // removeArrInfos(arrData);
+
+ // // dispatch(objectUnClickAction());
+ // }
+ // });
}
};
@@ -193,15 +281,15 @@ export const DronMarker = props => {
if (arrMarkers) {
const isExists = arrMarkers.find( ele => ele.id === item.objectId );
- const isInfos = arrInfos.find( info => info._id === item.objectId )
+ // const isInfos = arrInfos.find( info => info._id === item.objectId )
if (isExists) {
moveMarkers(isExists, position);
- moveInfos(isInfos, position);
+ // moveInfos(isInfos, position);
} else {
- addMarkers(position, item.objectId, item.controlId);
+ addMarkers(position, item.objectId, item.controlId, item);
}
} else {
- addMarkers(position, item.objectId, item.controlId);
+ addMarkers(position, item.objectId, item.controlId, item);
}
});
}
@@ -319,7 +407,7 @@ export const DronMarker = props => {
const markerInfo = () => {
arrMarkers.forEach((marker, idx) => {
- infoInit(marker, controlGpList[idx], idx);
+ // infoInit(marker, controlGpList[idx], idx);
if(controlGpList.length != 0) {
const info = new CustomOverlay({