드론 데이터블록 수정

src/assets/css/custom.css

@@ -1540,6 +1540,7 @@ h1.logo span {
   color: #bbb;
 }
 /* .dblock-ti{border-bottom:1px solid #bbb;padding-bottom:4px;} */
+<<<<<<< HEAD
 .dblock-ti span,
 .dblock-txt .ti {
   color: #f4f4f4;
@@ -1552,6 +1553,11 @@ h1.logo span {
 .dblock-txt-list + .dblock-txt-list {
   margin-top: 4px;
 }
+=======
+.dblock-ti span, .dblock-txt .ti{color:#f4f4f4;font-weight:500;display:block;}
+.dblock-txt{line-height: 1.2;}
+.dblock-txt-list + .dblock-txt-list{margin-top:4px;}
+>>>>>>> 4f7f181e911d0e99ac69642af4e531a190325090
 /* .dblock-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-txt-list span {
   font-size: 10px;

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

@@ -233,11 +233,15 @@ export const DronMarker = props => {
 
     // naver.maps.Event.addListener(map, 'zoom_changed', function (zoom) {
     //   const a = document.getElementsByClassName('dblock-box');
-    //   console.log(zoom * 10);
-    //   console.log(zoom);
+
     //   for (let i = 0; i < a.length; i++) {
-    //     a[i].style.width = `${zoom * 10 + 20}px`;
-    //     a[i].style.fontSize = `${zoom}px`;
+    //     if (zoom <= 9) {
+    //       a[i].style.display = 'none';
+    //     } else {
+    //       a[i].style.display = 'block';
+    //       a[i].style.width = `${zoom * 10 + 20}px`;
+    //       a[i].style.fontSize = `${zoom}px`;
+    //     }
     //   }
     //   // console.log(document.getElementsByClassName('dblock-box'));
     //   // document.querySelector('.dblock-box').style.width = `${zoom * 10}px`;
@@ -308,22 +312,20 @@ export const DronMarker = props => {
       info.setPosition(position, info);
       // info._element.html(`<div class="dblock-ti"><span>${info?._id}</span>
       // <span>${item?.speed}${item?.speedType} | ${item?.elev}${item?.elevType} | ${item?.heading}</span></div>`);
-      info._element.html(` 
-      <div class="dblock-ti">
-        <span>${info?._id}</span>
-      </div>
-      <div class="dblock-txt>
-        <div class="dblock-txt-list">
-          <div>
-            <span style="width: 250px; display: inline-block;">${item?.speed}${
-        item?.speedType
-      } | ${item?.elev}${item?.elevType} | ${item?.heading}</span>
-            <span style="width: 250px; display: inline-block;">${(item?.lat).toFixed(
-              6
-            )} | ${(item?.lng).toFixed(6)}</span>
+      info._element.html(`
+      
+        <div class="dblock-ti">
+          <span>${info?._id}</span>
+        </div>
+        <div class="dblock-txt">
+          <div class="dblock-txt-list">
+              <span>${item?.elev}M</span>
+              <span>${item?.speed}km</span>
+              <span>${(item?.lat).toFixed(6)} ${(item?.lng).toFixed(6)}</span>
           </div>
         </div>
-      </div>
+      
+      
     `);
     }
   };
@@ -383,24 +385,18 @@ export const DronMarker = props => {
   const infoInit = (marker, gps, idx) => {
     CustomOverlay = function (options) {
       this._element = $(`
-      
-      <div class="dblock-box" style="width:160px;font-size: 14px;">
-      <div class="dblock-ti">
-        <span>${marker?.id}</span>
-      </div>
-      <div class="dblock-txt>
-        <div class="dblock-txt-list">
-          <div>
-            <span style="width: 250px; display: inline-block;">${gps?.speed}${
-        gps?.speedType
-      } | ${gps?.elev}${gps?.elevType} | ${gps?.heading}</span>
-            <span style="width: 250px; display: inline-block;">${(gps?.lat).toFixed(
-              6
-            )} | ${(gps?.lng).toFixed(6)}</span>
+      <div class="dblock-box">
+        <div class="dblock-ti">
+          <span>${marker?.id}</span>
+        </div>
+        <div class="dblock-txt">
+          <div class="dblock-txt-list">
+              <span>${gps?.elev}M</span>
+              <span>${gps?.speed}km</span>
+              <span>${(gps?.lat).toFixed(6)} ${(gps?.lng).toFixed(6)}</span>
           </div>
         </div>
       </div>
-    </div>
         `);
 
       // this._element = $(`