pois_click 추가

dabeeo · Oct 2, 2024 · 1a8f8b6 · 1a8f8b6
1 parent e3731e2
commit 1a8f8b6
Show file tree

Hide file tree

Showing 2 changed files with 102 additions and 0 deletions.
diff --git a/Examples/pois_click/index.html b/Examples/pois_click/index.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>[pois]</title>
+        <link rel="stylesheet" href="style.css" />
+        <style>
+            /* 모달 스타일 */
+            .modal {
+                display: none; /* 기본적으로 숨겨져 있음 */
+                position: fixed;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                background-color: rgba(0, 0, 0, 0.5); /* 반투명 배경 */
+                z-index: 1000;
+            }
+
+            .modal-content {
+                background-color: white;
+                margin: 15% auto;
+                padding: 20px;
+                width: 80%;
+                border-radius: 10px;
+            }
+
+            .close {
+                float: right;
+                font-size: 24px;
+                cursor: pointer;
+            }
+        </style>
+    </head>
+    <link rel="stylesheet" href="../styles/styles.css" />
+    <body>
+        <div id="myModal" class="modal">
+            <div class="modal-content">
+                <span class="close">&times;</span>
+                <h2 id="title"></h2>
+                <iframe id="iframe" width="100%" height="400"></iframe>
+                <!-- URL 불러오기 -->
+            </div>
+        </div>
+        <div id="map" class="map"></div>
+    </body>
+    <!-- <script type="text/javascript" src='../../build/dabeeomaps-4.0.0.js'></script> -->
+    <script type="text/javascript" src="https://api-assets.dabeeomaps.com/upload/library/dabeeomaps-4.0-latest.js"></script>
+    <script>
+        const dabeeoMaps = new dabeeo.Maps();
+
+        let mapData = null;
+        let map = null;
+
+        // 모달 열고 닫기
+        const modal = document.getElementById('myModal');
+        const btn = document.getElementById('openModal');
+        const span = document.getElementsByClassName('close')[0];
+
+        async function init() {
+            //mapDataOption
+            const mapDataOption = {
+                clientId: '9JqoxRcCATv9f9t_yaSaUd',
+                clientSecret: '1eabcc7908fb163a6ece11fadbedf2c5',
+                serverType: 'SERVER_STUDIO4',
+            };
+            //mapData 가져오기
+            mapData = await dabeeoMaps.getMapData(mapDataOption);
+            console.log(mapData);
+
+            //mapContainer
+            const mapContainer = document.getElementById('map');
+            //mapOption 정의
+            const mapOption = {};
+            //mapOption으로 mapContainer에 map 그리기
+            map = await dabeeoMaps.showMap(mapContainer, mapOption, mapData);
+            console.log(map);
+            mapContainer?.addEventListener('poi-click', (e) => {
+                console.log(`${e.type} 에 대한 결과값`, e.detail);
+                const pois = e.detail;
+                pois[0].metadatas.forEach((poi) => {
+                    if (poi.fieldKey === 'URL') {
+                        modal.style.display = 'block'; // 모달 열기
+                        const iframe = document.getElementById('iframe');
+                        const title = document.getElementById('title');
+                        title.innerHTML = pois[0].title;
+                        iframe.src = poi.value[0].value;
+                        // window.open(poi.value[0].value, 'popupWindow', 'width=600,height=400,scrollbars=yes');
+                    }
+                });
+                span.onclick = function () {
+                    modal.style.display = 'none'; // 모달 닫기
+                };
+            });
+            console.log('test: [pois]');
+        }
+        init();
+    </script>
+</html>
diff --git a/src/components/Example/Example.jsx b/src/components/Example/Example.jsx
@@ -13,6 +13,7 @@ const Example = () => {
         'mapOption',
         'objects',
         'pois',
+        'pois_click',
         'controls',
         'focus',
         'mapContext',