Backend: near_show 기능 개발

YujeLee
Commit 0f68c19a6e0da63ed0279b1946ccd0b7ed972f38 0f68c19a 1 parent 520ad2a1
Showing 1 changed file with 153 additions and 0 deletions
views/maptest.html
--- a/views/maptest.html 0 → 100644
View file @0f68c19
+++ b/views/maptest.html 0 → 100644
View file @0f68c19
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>geolocation으로 마커 표시하기</title>
+
+</head>
+
+<body>
+    <p style="margin-top:-12px">
+        <b>Chrome 브라우저는 https 환경에서만 geolocation을 지원합니다.</b> 참고해주세요.
+    </p>
+    <div id="map" style="width:500px;height:350px;"></div>
+
+    <script type="text/javascript"
+        src="//dapi.kakao.com/v2/maps/sdk.js?appkey=a3386042ab2e0550ea06d265855b452c">//kakao map api 주소 받아옴</script>
+    <script>
+        var mysql = require('mysql');
+
+        var mapContainer = document.getElementById('map'), // 지도를 표시할 div 
+            mapOption = {
+                center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
+                level: 10 // 지도의 확대 레벨 
+            };
+
+        var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
+
+        // HTML5의 geolocation으로 사용할 수 있는지 확인합니다 
+        if (navigator.geolocation) {
+
+            // GeoLocation을 이용해서 접속 위치를 얻어옵니다
+            navigator.geolocation.getCurrentPosition(function (position) {
+
+                var lat = position.coords.latitude, // 위도
+                    lon = position.coords.longitude; // 경도
+                console.log(lat);
+                console.log(lon);
+                var locPosition = new kakao.maps.LatLng(lat, lon), // 마커가 표시될 위치를 geolocation으로 얻어온 좌표로 생성합니다
+                    message = '<div style="padding:5px;">여기에 계신가요?!</div>'; // 인포윈도우에 표시될 내용입니다
+
+                // 마커와 인포윈도우를 표시합니다
+                displayMarker(locPosition, message);
+            });
+
+        } else { // HTML5의 GeoLocation을 사용할 수 없을때 마커 표시 위치와 인포윈도우 내용을 설정합니다
+
+            var locPosition = new kakao.maps.LatLng(33.450701, 126.570667),
+                message = 'geolocation을 사용할수 없어요..'
+
+            displayMarker(locPosition, message);
+        }
+        
+        /////////// sql 데이터 불러옴 /////////////////
+        var near_show_list = [];
+        var connection = mysql.createConnection({
+            "host": "culturegallery.cm2bwcuyukrm.us-east-1.rds.amazonaws.com",
+            "user": "root",
+            "password": "dldbwp1207",
+            "port": "3306",
+            "database": "showdata"
+        });
+
+        connection.connect();
+        var dataNum = 0;
+        connection.query('SELECT COUNT (*) AS cnt FROM SHOW_DATA', function (error, results, field) {
+            if (error) {
+                console.log(error);
+            }
+            console.log(results[0].cnt);
+            dataNum = results[0].cnt;
+        });
+
+        connection.query('SELECT id,latitude,longitude FROM SHOW_DATA', function (error, results, field) {
+            if (error) {
+                console.log(error);
+            }
+            console.log([lat, lon]);
+            for (var i = 0; i < dataNum; i++) {
+                var latgap = (lat - results[i].latitude) * 110;
+                var longap = (lon - results[i].longitude) * 91;
+                var cal = latgap * latgap + longap * longap;
+
+                //내 위치 반경 키로수 ^ 2만큼 cal 값 push  ->  content 위치 
+                if (cal <= 1600) {
+                    console.log(results[i].id);
+                    near_show_list.push([results[i].id, results[i].latitude, results[i].longitude]);
+                }
+            }
+        });
+
+        connection.end();
+        ////////////////////////////////////////////////
+
+        
+        displayShows(near_show_list);
+        ////    displayShows() 정의    ////
+        function displayShows(near_list) {
+            var imageSrc = "https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png";
+            var kakao_near_list = [];
+            for (var i = 0; i < near_list.length; i++) {
+                kakao_near_list.push({
+                    title: id,
+                    lating: new kakao.maps.Lating(near_list[i][1], near_list[i][2])
+                })
+            }
+            for (var i = 0; i < kakao_near_list.length; i++) {
+
+                // 마커 이미지의 이미지 크기 입니다
+                var imageSize = new kakao.maps.Size(24, 35);
+
+                // 마커 이미지를 생성합니다    
+                var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize);
+
+                // 마커를 생성합니다
+                var marker = new kakao.maps.Marker({
+                    map: map, // 마커를 표시할 지도
+                    position: kakao_near_list[i].latlng, // 마커를 표시할 위치
+                    title: kakao_near_list[i].title, // 마커의 타이틀, 마커에 마우스를 올리면 타이틀이 표시됩니다
+                    image: markerImage // 마커 이미지 
+                });
+            }
+        }
+
+        ///     displayMarker 함수 정의      ///
+        // 지도에 마커와 인포윈도우를 표시하는 함수입니다
+        function displayMarker(locPosition, message) {
+
+            // 마커를 생성합니다
+            var marker = new kakao.maps.Marker({
+                map: map,
+                position: locPosition
+            });
+
+            var iwContent = message, // 인포윈도우에 표시할 내용
+                iwRemoveable = true;
+
+            // 인포윈도우를 생성합니다
+            var infowindow = new kakao.maps.InfoWindow({
+                content: iwContent,
+                removable: iwRemoveable
+            });
+
+            // 인포윈도우를 마커위에 표시합니다 
+            infowindow.open(map, marker);
+
+            // 지도 중심좌표를 접속위치로 변경합니다
+            map.setCenter(locPosition);
+        }
+    </script>
+</body>
+
+</html>
\ No newline at end of file