.

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

@@ -30,6 +30,10 @@ export const DronMarker = props => {
         content: contentString
     });
 
+    useEffect(() => {
+      if(arrMarkers.length != 0) markerInfo(arrMarkers)
+    }, [arrMarkers])
+
 
     useEffect(() => {
         markerInit();
@@ -91,7 +95,7 @@ export const DronMarker = props => {
 
     //마커를 그린다.
     const addMarkers = (position, id, controlId) => {
-        var marker = new naver.maps.Marker({
+        let marker = new naver.maps.Marker({
             position: position,
             title: id,
             id: id,
@@ -111,13 +115,13 @@ export const DronMarker = props => {
         marker.setMap(props.map);
 
         // drone 정보 창
-        markerInfo(marker);
         
         naver.maps.Event.addListener(marker, 'click', function (e) {
           handlerDronClick(marker);
         });
         
         setArrMarkers(m => [...m, marker]);
+        // markerInfo(marker, position, id);
     };
 
     const handlerDronClick = marker => {
@@ -175,7 +179,7 @@ export const DronMarker = props => {
       if (arrInfos && controlGpList) {
         arrInfos.map(info => {
           const isExists = controlGpList.find(
-            item => item.objectId === window.id
+            item => item.objectId === info.id
           );
           if (!isExists) {
             removeInfos(info);
@@ -192,7 +196,7 @@ export const DronMarker = props => {
     const markerInit = () => {
         if (controlGpList) {
             allRemoveMarkers();
-            allRemoveInfos();
+            // allRemoveInfos();
             controlGpList.map(item => {
                 const position = new naver.maps.LatLng(item.lat, item.lng);
 
@@ -202,7 +206,7 @@ export const DronMarker = props => {
                     );
                     if (isExists) {
                         moveMarkers(isExists, position);
-                        moveInfos(isExists, position);
+                        // moveInfos(isExists, position);
                     } else {
                         addMarkers(position, item.objectId, item.controlId);
                     }
@@ -213,7 +217,7 @@ export const DronMarker = props => {
         }
     };
 
-    //운항정보 창 셋팅
+    // //운항정보 창 셋팅
     const infoInit = (marker, gps) => {
       CustomOverlay = function(options) {
         this._element = $(`
@@ -239,6 +243,7 @@ export const DronMarker = props => {
     
         this.setPosition(options.position);
         this.setMap(options.map || null);
+        this.setId(options.id);
       };
     
       CustomOverlay.prototype = new naver.maps.OverlayView();
@@ -282,6 +287,14 @@ export const DronMarker = props => {
       CustomOverlay.prototype.getPosition = function() {
           return this._position;
       };
+
+      CustomOverlay.prototype.setId = function(id) {
+        this._id = id;
+      };
+
+      CustomOverlay.prototype.getId = function(id) {
+        return this._id;
+      };
     }
 
     const removeArrMarkers = arrData => {
@@ -292,31 +305,9 @@ export const DronMarker = props => {
       setArrInfos(arrData);
     };
 
-    const markerInfo = (marker) => {
+    // const markerInfo = (marker, position, id) => {
-      console.log('ddd')
+    const markerInfo = (arrMarkers) => {
-      // controlGpList.forEach(gps => {
+      // controlGpList.forEach(gps => 
-
-      //   // const contents = `
-      //   //   <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>
-      //   // `;
-
 
       //   // var info = new naver.maps.InfoWindow({ 
       //   //     id: marker.id,
@@ -331,22 +322,19 @@ export const DronMarker = props => {
 
       //   // setArrWindows(m => [...m, info]);
 
-      //   infoInit(marker, gps);
-
-      //   var overlay = new CustomOverlay({
-      //     position: marker.position,
-      //     map: map
-      //   });
-      // });
 
-      infoInit(marker, controlGpList[0])
+      arrMarkers.forEach((marker, idx) => {
-      var overlay = new CustomOverlay({
+        infoInit(marker, controlGpList[idx]);
-        position: marker.position,
+        if(controlGpList.length != 0) {
-        map: map
+          const info = new CustomOverlay({
+            position: new naver.maps.LatLng(controlGpList[idx].lat, controlGpList[idx].lng),
+            map: map,
+            id: marker.id
+          });
+          console.log(info)
+          setArrInfos(m => [...m, info]);
+        }
       });
-
-      console.log(marker.position, 'marker')
-      console.log(overlay._position, 'over')
     }