diff --git a/src/assets/css/custom.css b/src/assets/css/custom.css index 75d7c17..f1812b1 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 522f20e..5080460 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({