https://www.chyoss.tk:23023/construcion now, receive your location

최현영
Commit 73ef3049cec01b98180c206eddbc260a2f0dedc3 73ef3049 1 parent c8f130a7
Showing 2 changed files with 93 additions and 43 deletions
whereur/app.js
whereur/views/mapconstruction.ejs
--- a/whereur/app.js
View file @73ef304
+++ b/whereur/app.js
View file @73ef304
@@ -68,7 +68,6 @@ app.get('/construction', function(req, res){
     })
 })
-
 function jsonforecast(callback){ //교통예보
     var url2 = 'http://data.ex.co.kr/openapi/safeDriving/forecast';
     var queryParams2  = '?' + encodeURIComponent('key') + '=4365330273'; /* Service Key*/
@@ -538,6 +537,31 @@ function viewhtml(eventObj){
         });
 }
+function viewconstruction(eventObj){
+        request.post(
+        {
+            url: TARGET_URL,
+            headers: {
+                'Authorization': `Bearer ${TOKEN}`
+            },
+            json: {
+                "replyToken":eventObj.replyToken,
+                "messages":[
+                    {
+                        "type":"text",
+                        "text":"실시간 고속국도 공사 상황 웹페이지로 안내합니다."
+                    },
+                    {
+                        "type":"text",
+                        "text":"https://www.chyoss.tk:23023/construction"
+                    }
+                ]
+            }
+        },(error, response, body) => {
+            console.log(body)
+        });
+}
+
 function leadfee(eventObj){
     request.post(
--- a/whereur/views/mapconstruction.ejs
View file @73ef304
+++ b/whereur/views/mapconstruction.ejs
View file @73ef304
@@ -6,18 +6,20 @@
 </head>
 <body>
-<div id="map" style="width:100%;height:350px;"></div>
+<div id="map" style="width:100%; height:100%"></div>
-
+<style type="text/css"> html, body { height:100%; overflow:hidden } .h-div {height:96%; border:3px #f99 solid} </style>
+<div class="h-div"></div>
 <form method="get" action="/process/mapconstruction"></form>
 <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=3ebfae70e971821ab8f14e074d068bdc"></script>
 <script>
     var mapContainer = document.getElementById('map'), // 지도를 표시할 div  
     mapOption = { 
         center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
-        level: 3 // 지도의 확대 레벨
+        level: 12// 지도의 확대 레벨
     };
 var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
+map.relayout();
 var json = <%- JSON.stringify(construnctionjson) %>;
 console.log(json);
@@ -39,65 +41,89 @@ for (var i = 0; i < positions.length; i ++) {
     // 마커를 생성합니다
     var marker = new kakao.maps.Marker({
         map: map, // 마커를 표시할 지도
-        position: positions[i].latlng // 마커의 위치
+        position: positions[i].latlng, // 마커의 위치
+        clickable: true
     });
     // 마커에 표시할 인포윈도우를 생성합니다 
     var infowindow = new kakao.maps.InfoWindow({
-        content: positions[i].content // 인포윈도우에 표시할 내용
+        content: '<div>'+ positions[i].content + '</div>',
+        removable: true // 인포윈도우에 표시할 내용
     });
     // 마커에 mouseover 이벤트와 mouseout 이벤트를 등록합니다
     // 이벤트 리스너로는 클로저를 만들어 등록합니다 
     // for문에서 클로저를 만들어 주지 않으면 마지막 마커에만 이벤트가 등록됩니다
-    kakao.maps.event.addListener(marker, 'mouseover', makeOverListener(map, marker, infowindow));
+    kakao.maps.event.addListener(marker, 'click', makeClickListener(map, marker, infowindow));
-    kakao.maps.event.addListener(marker, 'mouseout', makeOutListener(infowindow));
+    function makeClickListener(map, marker, infowindow) {
-}
+        return function() {
-
-// 인포윈도우를 표시하는 클로저를 만드는 함수입니다 
-function makeOverListener(map, marker, infowindow) {
-    return function() {
         infowindow.open(map, marker);
-    };
+        };
+    }
+    
 }
-// 인포윈도우를 닫는 클로저를 만드는 함수입니다 
+
-function makeOutListener(infowindow) {
+
-    return function() {
+var imageSrc = 'https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png', // 마커이미지의 주소입니다    
-        infowindow.close();
+    imageSize = new kakao.maps.Size(40, 40), // 마커이미지의 크기입니다
-    };
+    imageOption = {offset: new kakao.maps.Point(27, 69)}; 
+
+    var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize, imageOption);
+
+// HTML5의 geolocation으로 사용할 수 있는지 확인합니다 
+if (navigator.geolocation) {
+    
+    // GeoLocation을 이용해서 접속 위치를 얻어옵니다
+    navigator.geolocation.getCurrentPosition(function(position) {
+        
+        var lat = position.coords.latitude, // 위도
+            lon = position.coords.longitude; // 경도
+        
+        var locPosition = new kakao.maps.LatLng(lat, lon), // 마커가 표시될 위치를 geolocation으로 얻어온 좌표로 생성합니다
+            message = '<div style="padding:5px;">여기에 계신가요?!</div>'; // 인포윈도우에 표시될 내용입니다
+        
+        // 마커와 인포윈도우를 표시합니다
+        displayMarker(locPosition, message, markerImage);
+            
+      });
+    
+} else { // HTML5의 GeoLocation을 사용할 수 없을때 마커 표시 위치와 인포윈도우 내용을 설정합니다
+    
+    var locPosition = new kakao.maps.LatLng(33.450701, 126.570667),    
+        message = 'geolocation을 사용할수 없어요..'
+        
+    displayMarker(locPosition, message);
 }
+// 지도에 마커와 인포윈도우를 표시하는 함수입니다
+function displayMarker(locPosition, message, image) {
-/* 아래와 같이도 할 수 있습니다 */
-/*
-for (var i = 0; i < positions.length; i ++) {
     // 마커를 생성합니다
-    var marker = new kakao.maps.Marker({
+    var marker = new kakao.maps.Marker({  
-        map: map, // 마커를 표시할 지도
+        map: map, 
-        position: positions[i].latlng // 마커의 위치
+        position: locPosition,
-    });
+        image: image
+    }); 
+    
+    var iwContent = message, // 인포윈도우에 표시할 내용
+        iwRemoveable = true;
-    // 마커에 표시할 인포윈도우를 생성합니다 
+    // 인포윈도우를 생성합니다
     var infowindow = new kakao.maps.InfoWindow({
-        content: positions[i].content // 인포윈도우에 표시할 내용
+        content : iwContent,
+        removable : iwRemoveable
     });
-
+    
-    // 마커에 이벤트를 등록하는 함수 만들고 즉시 호출하여 클로저를 만듭니다
+    // 인포윈도우를 마커위에 표시합니다 
-    // 클로저를 만들어 주지 않으면 마지막 마커에만 이벤트가 등록됩니다
+    infowindow.open(map, marker);
-    (function(marker, infowindow) {
+    
-        // 마커에 mouseover 이벤트를 등록하고 마우스 오버 시 인포윈도우를 표시합니다 
+    // 지도 중심좌표를 접속위치로 변경합니다
-        kakao.maps.event.addListener(marker, 'mouseover', function() {
+    map.setCenter(locPosition); 
-            infowindow.open(map, marker);
-        });
-
-        // 마커에 mouseout 이벤트를 등록하고 마우스 아웃 시 인포윈도우를 닫습니다
-        kakao.maps.event.addListener(marker, 'mouseout', function() {
-            infowindow.close();
-        });
-    })(marker, infowindow);
 }
-*/
+
+
+
 </script>
 </body>
 </html>
\ No newline at end of file