.

src/components/map/naver/dron/DronMarker.js

@@ -1,3 +1,4 @@
+import $ from 'jquery';
 import { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import '../../../../assets/css/custom.css';
@@ -17,7 +18,12 @@ export const DronMarker = props => {
 
     const [arrMarkers, setArrMarkers] = useState([]);
 
+    const [arrInfos, setArrInfos] = useState([]);
+
     let naver = props.naver;
+    let map = props.map;
+
+    let CustomOverlay;
 
     var contentString = ['<div class="iw_inner"> dddd', '</div>'].join('');
     var infowindow = new naver.maps.InfoWindow({
@@ -106,7 +112,7 @@ export const DronMarker = props => {
         marker.setMap(props.map);
 
         // drone 정보 창
-        markerInfoWindow(marker);
+        markerInfo(marker);
 
         naver.maps.Event.addListener(marker, 'click', function (e) {
             handlerDronClick(marker);
@@ -133,11 +139,19 @@ export const DronMarker = props => {
         marker.setMap(null);
     };
 
+    const removeInfos = info => {
+      info.setMap(null);
+    }
+
     //마커에 위치를 이동한다.
     const moveMarkers = (marker, position) => {
         marker.setPosition(position);
     };
 
+    const moveInfos = (info, position) => {
+      info.setPosition(position);
+    };
+
     //데이터가 없는 마커를 모두 삭제 한다.
     const allRemoveMarkers = () => {
         if (arrMarkers && controlGpList) {
@@ -158,10 +172,28 @@ export const DronMarker = props => {
         }
     };
 
+    const allRemoveInfos = () => {
+      if (arrInfos && controlGpList) {
+        arrInfos.map(info => {
+          const isExists = controlGpList.find(
+            item => item.objectId === window.id
+          );
+          if (!isExists) {
+            removeInfos(info);
+            const arrData = arrInfos.filter(
+                item => item.id != info.id
+            );
+            removeArrInfos(arrData);
+          }
+        })
+      }
+    }
+
     //마커를 셋팅 한다.
     const markerInit = () => {
         if (controlGpList) {
             allRemoveMarkers();
+            allRemoveInfos();
             controlGpList.map(item => {
                 const position = new naver.maps.LatLng(item.lat, item.lng);
 
@@ -171,6 +203,7 @@ export const DronMarker = props => {
                     );
                     if (isExists) {
                         moveMarkers(isExists, position);
+                        moveInfos(isExists, position);
                     } else {
                         addMarkers(position, item.objectId, item.controlId);
                     }
@@ -181,47 +214,142 @@ export const DronMarker = props => {
         }
     };
 
+    //운항정보 창 셋팅
+    const infoInit = (marker, gps) => {
+      CustomOverlay = function(options) {
+        this._element = $(`
+            <div class="tooltip-box" style="width: 150px;">
+            <div class="tooltip-ti">
+            <span>${marker.id}</span>
+            </div>
+            <div class="tooltip-txt>
+              <div class="tooltip-txt-list">
+                <div>
+                  <span style="width: 120px; display: inline-block;">속도: ${gps.speed}${gps.speedType}</span>
+                </div>
+                <div>
+                  <span style="width: 120px; display: inline-block;">고도: ${gps.elev}${gps.elevType}</span>
+                </div>
+                <div>
+                  <span style="width: 120px; display: inline-block;">헤딩방향: ${gps.heading}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        `)
+    
+        this.setPosition(options.position);
+        this.setMap(options.map || null);
+      };
+    
+      CustomOverlay.prototype = new naver.maps.OverlayView();
+      CustomOverlay.prototype.constructor = CustomOverlay;
+    
+      //메소드 재정의
+    
+      //필수
+      CustomOverlay.prototype.onAdd = function() {
+        var overlayLayer = this.getPanes().overlayLayer;
+    
+        this._element.appendTo(overlayLayer);
+      };
+    
+      CustomOverlay.prototype.draw = function() {
+        if (!this.getMap()) {
+            return;
+        }
+    
+        var projection = this.getProjection(),
+            position = this.getPosition(),
+            pixelPosition = projection.fromCoordToOffset(position);
+    
+        this._element.css('left', pixelPosition.x);
+        this._element.css('top', pixelPosition.y);
+      };
+    
+      CustomOverlay.prototype.onRemove = function() {
+          var overlayLayer = this.getPanes().overlayLayer;
+    
+          this._element.remove();
+          this._element.off();
+      };
+    
+      //속성
+      CustomOverlay.prototype.setPosition = function(position) {
+          this._position = position;
+          this.draw();
+      };
+    
+      CustomOverlay.prototype.getPosition = function() {
+          return this._position;
+      };
+    }
+
     const removeArrMarkers = arrData => {
         setArrMarkers(arrData);
     };
 
-    const markerInfoWindow = (marker) => {
+    const removeArrInfos = arrData => {
-        controlGpList.forEach(gps => {
+      setArrInfos(arrData);
+    };
 
-            const contents = [
+    const markerInfo = (marker) => {
-                `<div class="tooltip-box">`,
+      console.log('ddd')
-                `   <div class="tooltip-ti">`,
+      // controlGpList.forEach(gps => {
-                `       <span>${marker.id}</span>`,
+
-                `   </div>`,
+      //   // const contents = `
-                `   <div class="tooltip-txt">`,
+      //   //   <div class="tooltip-box" style="width: 150px;">
-                `       <div class="tooltip-txt-list">`,                
+      //   //     <div class="tooltip-ti">
-                `          <span>${gps.speed}${gps.speedType}</span>`,
+      //   //       <span>${marker.id}</span>
-                `       </div>`,
+      //   //     </div>
-                `       <div class="tooltip-txt-list">`,
+      //   //     <div class="tooltip-txt>
-                `          <span>${gps.elev}${gps.elevType}</span>`,
+      //   //       <div class="tooltip-txt-list">
-                `       </div>`,
+      //   //         <div>
-                `       <div class="tooltip-txt-list">`,
+      //   //           <span style="width: 120px; display: inline-block;">속도: ${gps.speed}${gps.speedType}</span>
-                `          <span>${gps.heading}</span>`,
+      //   //         </div>
-                `       </div>`,
+      //   //         <div>
-                `   </div>`,
+      //   //           <span style="width: 120px; display: inline-block;">고도: ${gps.elev}${gps.elevType}</span>
-                `</div>`
+      //   //         </div>
-            ].join('');
+      //   //         <div>
-
+      //   //           <span style="width: 120px; display: inline-block;">헤딩방향: ${gps.heading}</span>
-            const info = new naver.maps.InfoWindow({ 
+      //   //         </div>
-                id: marker.id,
+      //   //       </div>
-                content: contents,
+      //   //     </div>
-                backgroundColor: '#283046', //박스안쪽영역 컬러                
+      //   //   </div>
-                anchorSize: new props.naver.maps.Size(30, -10),
+      //   // `;
-                anchorSkew: false,
+
-                anchorColor: '#283046',
+
-                pixelOffset: new props.naver.maps.Point(20, -20)
+      //   // var info = new naver.maps.InfoWindow({ 
+      //   //     id: marker.id,
+      //   //     content: contents,
+      //   //     backgroundColor: '#283046', //박스안쪽영역 컬러                
+      //   //     anchorSize: new props.naver.maps.Size(30, -10),
+      //   //     anchorSkew: false,
+      //   //     anchorColor: '#283046',
+      //   //     pixelOffset: new props.naver.maps.Point(20, -20)
+      //   // });
+      //   // info.open(props.map, marker);
+
+      //   // setArrWindows(m => [...m, info]);
+
+      //   infoInit(marker, gps);
+
+      //   var overlay = new CustomOverlay({
+      //     position: marker.position,
+      //     map: map
+      //   });
+      // });
+
+      infoInit(marker, controlGpList[0])
+      var overlay = new CustomOverlay({
+        position: marker.position,
+        map: map
       });
 
-            console.log(info);
+      console.log(marker.position, 'marker')
-
+      console.log(overlay._position, 'over')
-            info.open(props.map, marker);
-        });
     }
 
+  
     return null;
 };