이유제 / CultureGallery

Go to a project
Toggle navigation Toggle navigation pinning
송효섭
45d341fd 1 parent 748405a7

sql 적용 카카오맵 마킹 테스트

Expand all
Inline Side-by-side
Showing 7 changed files with 312 additions and 140 deletions
...@@ -5,6 +5,7 @@ const app = express(); ...@@ -5,6 +5,7 @@ const app = express();
5 //화면 별 router 연결, 라우터 호출해서 페이지를 불러오는데 사용함. 5 //화면 별 router 연결, 라우터 호출해서 페이지를 불러오는데 사용함.
6 var mainRouter = require('./routes') //호출시 main.js 실행 (main.js : title 할당하고 main.html 열어줌) 6 var mainRouter = require('./routes') //호출시 main.js 실행 (main.js : title 할당하고 main.html 열어줌)
7 var loginRouter = require('./routes/login') 7 var loginRouter = require('./routes/login')
8 +var NearContentRouter = require('./routes/database')
8 //디폴트 포트 값 : 8000 9 //디폴트 포트 값 : 8000
9 app.set('port', process.env.PORT || 8000); 10 app.set('port', process.env.PORT || 8000);
10 11
...@@ -16,15 +17,15 @@ app.engine('html', require('ejs').renderFile); ...@@ -16,15 +17,15 @@ app.engine('html', require('ejs').renderFile);
16 //각각의 요청에서 router 호출해서 page를 전환함. 17 //각각의 요청에서 router 호출해서 page를 전환함.
17 app.use('/', mainRouter); 18 app.use('/', mainRouter);
18 app.use('/login', loginRouter); 19 app.use('/login', loginRouter);
19 - 20 +// app.use('/map', NearContentRouter);
20 21
21 //css, image 등 정적 파일을 public에서 불러옴 -> html과 연결함 22 //css, image 등 정적 파일을 public에서 불러옴 -> html과 연결함
22 app.use(express.static(path.join(__dirname, 'public'))); 23 app.use(express.static(path.join(__dirname, 'public')));
23 24
24 25
25 -app.get('/logout', function (req, res) { 26 +// app.get('/logout', function (req, res) {
26 - res.send("Logout success"); 27 +// res.send("Logout success");
27 -}); 28 +// });
28 29
29 30
30 app.listen(app.get('port'), () => { 31 app.listen(app.get('port'), () => {
......
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html> 2 <html>
3 +
3 <head> 4 <head>
4 <meta charset="utf-8"> 5 <meta charset="utf-8">
5 <title>geolocation으로 마커 표시하기</title> 6 <title>geolocation으로 마커 표시하기</title>
6 - 7 +
7 </head> 8 </head>
9 +
8 <body> 10 <body>
9 -<p style="margin-top:-12px"> 11 + <p style="margin-top:-12px">
10 - <b>Chrome 브라우저는 https 환경에서만 geolocation을 지원합니다.</b> 참고해주세요. 12 + <b>Chrome 브라우저는 https 환경에서만 geolocation을 지원합니다.</b> 참고해주세요.
11 -</p> 13 + </p>
12 -<div id="map" style="width:500px;height:350px;"></div> 14 + <div id="map" style="width:500px;height:350px;"></div>
13 - 15 +
14 -<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=a3386042ab2e0550ea06d265855b452c">//kakao map api 주소 받아옴</script> 16 + <script type="text/javascript"
15 -<script> 17 + src="//dapi.kakao.com/v2/maps/sdk.js?appkey=a3386042ab2e0550ea06d265855b452c">//kakao map api 주소 받아옴</script>
16 -const near=require('study.js'); 18 + <script>
17 - 19 + const near = require('study.js');
18 -var mapContainer = document.getElementById('map'), // 지도를 표시할 div 20 +
19 - mapOption = { 21 + var mapContainer = document.getElementById('map'), // 지도를 표시할 div
20 - center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표 22 + mapOption = {
21 - level: 10 // 지도의 확대 레벨 23 + center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
22 - }; 24 + level: 10 // 지도의 확대 레벨
23 - 25 + };
24 -var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다 26 +
25 - 27 + var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
26 -// HTML5의 geolocation으로 사용할 수 있는지 확인합니다 28 +
27 -if (navigator.geolocation) { 29 + // HTML5의 geolocation으로 사용할 수 있는지 확인합니다
28 - 30 + if (navigator.geolocation) {
29 - // GeoLocation을 이용해서 접속 위치를 얻어옵니다 31 +
30 - navigator.geolocation.getCurrentPosition(function(position) { 32 + // GeoLocation을 이용해서 접속 위치를 얻어옵니다
31 - 33 + navigator.geolocation.getCurrentPosition(function (position) {
32 - var lat = position.coords.latitude, // 위도 34 +
33 - lon = position.coords.longitude; // 경도 35 + var lat = position.coords.latitude, // 위도
34 - console.log(lat); 36 + lon = position.coords.longitude; // 경도
35 - console.log(lon); 37 + console.log(lat);
36 - var locPosition = new kakao.maps.LatLng(lat, lon), // 마커가 표시될 위치를 geolocation으로 얻어온 좌표로 생성합니다 38 + console.log(lon);
37 - message = '<div style="padding:5px;">여기에 계신가요?!</div>'; // 인포윈도우에 표시될 내용입니다 39 + var locPosition = new kakao.maps.LatLng(lat, lon), // 마커가 표시될 위치를 geolocation으로 얻어온 좌표로 생성합니다
38 - 40 + message = '<div style="padding:5px;">여기에 계신가요?!</div>'; // 인포윈도우에 표시될 내용입니다
39 - // 마커와 인포윈도우를 표시합니다 41 +
40 - displayMarker(locPosition, message); 42 + // 마커와 인포윈도우를 표시합니다
41 - 43 + displayMarker(locPosition, message);
42 - }); 44 + });
43 - 45 +
44 -} else { // HTML5의 GeoLocation을 사용할 수 없을때 마커 표시 위치와 인포윈도우 내용을 설정합니다 46 + } else { // HTML5의 GeoLocation을 사용할 수 없을때 마커 표시 위치와 인포윈도우 내용을 설정합니다
45 - 47 +
46 - var locPosition = new kakao.maps.LatLng(33.450701, 126.570667), 48 + var locPosition = new kakao.maps.LatLng(33.450701, 126.570667),
47 - message = 'geolocation을 사용할수 없어요..' 49 + message = 'geolocation을 사용할수 없어요..'
48 - 50 +
49 - displayMarker(locPosition, message); 51 + displayMarker(locPosition, message);
50 -} 52 + }
51 - 53 +
52 - 54 +
53 - 55 +
54 - 56 +
55 -displayShows(); 57 + displayShows();
56 -function displayShows(){ 58 + function displayShows() {
57 - var imageSrc = "https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png"; 59 + var imageSrc = "https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png";
58 - var near_list=near(lat,lon); 60 + var near_list = near(lat, lon);
59 - var positions=[]; 61 + var positions = [];
60 - for(var i =0;i<near_list.length;i++){ 62 + for (var i = 0; i < near_list.length; i++) {
61 - positions.push({title: id, 63 + positions.push({
62 - lating: new kaka0.maps.Lating(near_list[i][1],near_list[i][2])}) 64 + title: id,
63 - } 65 + lating: new kakao.maps.Lating(near_list[i][1], near_list[i][2])
64 -for (var i = 0; i < positions.length; i ++) { 66 + })
65 - 67 + }
66 - // 마커 이미지의 이미지 크기 입니다 68 + for (var i = 0; i < positions.length; i++) {
67 - var imageSize = new kakao.maps.Size(24, 35); 69 +
68 - 70 + // 마커 이미지의 이미지 크기 입니다
69 - // 마커 이미지를 생성합니다 71 + var imageSize = new kakao.maps.Size(24, 35);
70 - var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize); 72 +
71 - 73 + // 마커 이미지를 생성합니다
72 - // 마커를 생성합니다 74 + var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize);
73 - var marker = new kakao.maps.Marker({ 75 +
74 - map: map, // 마커를 표시할 지도 76 + // 마커를 생성합니다
75 - position: positions[i].latlng, // 마커를 표시할 위치 77 + var marker = new kakao.maps.Marker({
76 - title : positions[i].title, // 마커의 타이틀, 마커에 마우스를 올리면 타이틀이 표시됩니다 78 + map: map, // 마커를 표시할 지도
77 - image : markerImage // 마커 이미지 79 + position: positions[i].latlng, // 마커를 표시할 위치
78 - }); 80 + title: positions[i].title, // 마커의 타이틀, 마커에 마우스를 올리면 타이틀이 표시됩니다
79 - } 81 + image: markerImage // 마커 이미지
80 -} 82 + });
81 -// 지도에 마커와 인포윈도우를 표시하는 함수입니다 83 + }
82 -function displayMarker(locPosition, message) { 84 + }
83 - 85 + // 지도에 마커와 인포윈도우를 표시하는 함수입니다
84 - // 마커를 생성합니다 86 + function displayMarker(locPosition, message) {
85 - var marker = new kakao.maps.Marker({ 87 +
86 - map: map, 88 + // 마커를 생성합니다
87 - position: locPosition 89 + var marker = new kakao.maps.Marker({
88 - }); 90 + map: map,
89 - 91 + position: locPosition
90 - var iwContent = message, // 인포윈도우에 표시할 내용 92 + });
91 - iwRemoveable = true; 93 +
92 - 94 + var iwContent = message, // 인포윈도우에 표시할 내용
93 - // 인포윈도우를 생성합니다 95 + iwRemoveable = true;
94 - var infowindow = new kakao.maps.InfoWindow({ 96 +
95 - content : iwContent, 97 + // 인포윈도우를 생성합니다
96 - removable : iwRemoveable 98 + var infowindow = new kakao.maps.InfoWindow({
97 - }); 99 + content: iwContent,
98 - 100 + removable: iwRemoveable
99 - // 인포윈도우를 마커위에 표시합니다 101 + });
100 - infowindow.open(map, marker); 102 +
101 - 103 + // 인포윈도우를 마커위에 표시합니다
102 - // 지도 중심좌표를 접속위치로 변경합니다 104 + infowindow.open(map, marker);
103 - map.setCenter(locPosition); 105 +
104 -} 106 + // 지도 중심좌표를 접속위치로 변경합니다
105 -</script> 107 + map.setCenter(locPosition);
108 + }
109 + </script>
106 </body> 110 </body>
111 +
107 </html> 112 </html>
...\ No newline at end of file ...\ No newline at end of file
......
1 var mysql = require('mysql'); 1 var mysql = require('mysql');
2 2
3 -module.exports={ 3 +module.exports = {
4 - nearShow: function(lat,lon){ 4 + nearShow: function (lat, lon) {
5 - var near_show_list=[]; 5 + var near_show_list = [];
6 - var connection = mysql.createConnection({ 6 + var connection = mysql.createConnection({
7 - "host": "culturegallery.cm2bwcuyukrm.us-east-1.rds.amazonaws.com", 7 + "host": "culturegallery.cm2bwcuyukrm.us-east-1.rds.amazonaws.com",
8 - "user":"root", 8 + "user": "root",
9 - "password": "dldbwp1207", 9 + "password": "dldbwp1207",
10 - "port": "3306", 10 + "port": "3306",
11 - "database": "showdata" 11 + "database": "showdata"
12 - }); 12 + });
13 -
14 - connection.connect();
15 - var dataNum=0;
16 - connection.query('SELECT COUNT (*) AS cnt FROM SHOW_DATA',function(error,results,field){
17 - if(error){
18 - console.log(error);
19 - }
20 - console.log(results[0].cnt);
21 - dataNum=results[0].cnt;
22 - });
23 13
24 - connection.query('SELECT id,latitude,longitude FROM SHOW_DATA',function(error,results,field){ 14 + connection.connect();
25 - if(error){ 15 + var dataNum = 0;
26 - console.log(error); 16 + connection.query('SELECT COUNT (*) AS cnt FROM SHOW_DATA', function (error, results, field) {
27 - } 17 + if (error) {
28 - console.log([lat,lon]); 18 + console.log(error);
29 - for(var i=0;i<dataNum;i++){
30 - var latgap=(lat-results[i].latitude)*110;
31 - var longap=(lon-results[i].longitude)*91;
32 - var cal=latgap*latgap+longap*longap;
33 - if(cal<=1600){
34 - console.log(results[i].id);
35 - near_show_list.push([results[i].id,results[i].latitude,results[i].longitude]);
36 } 19 }
37 - } 20 + console.log(results[0].cnt);
38 - }); 21 + dataNum = results[0].cnt;
39 - 22 + });
40 - connection.end(); 23 +
41 - return near_show_list; 24 + connection.query('SELECT id,latitude,longitude FROM SHOW_DATA', function (error, results, field) {
25 + if (error) {
26 + console.log(error);
27 + }
28 + console.log([lat, lon]);
29 + for (var i = 0; i < dataNum; i++) {
30 + var latgap = (lat - results[i].latitude) * 110;
31 + var longap = (lon - results[i].longitude) * 91;
32 + var cal = latgap * latgap + longap * longap;
33 +
34 + //내 위치 반경 키로수 ^ 2만큼 cal 값 push -> content 위치
35 + if (cal <= 1600) {
36 + console.log(results[i].id);
37 + near_show_list.push([results[i].id, results[i].latitude, results[i].longitude]);
38 + }
39 + }
40 + });
41 +
42 + connection.end();
43 + return near_show_list;
42 } 44 }
43 } 45 }
......
This diff is collapsed. Click to expand it.
1 +var mysql = require('mysql');
2 +
3 +module.exports = {
4 + init: function (lat, lon) {
5 + var near_show_list = [];
6 + var connection = mysql.createConnection({
7 + "host": "culturegallery.cm2bwcuyukrm.us-east-1.rds.amazonaws.com",
8 + "user": "root",
9 + "password": "dldbwp1207",
10 + "port": "3306",
11 + "database": "showdata"
12 + });
13 +
14 + connection.connect();
15 + var dataNum = 0;
16 + connection.query('SELECT COUNT (*) AS cnt FROM SHOW_DATA', function (error, results, field) {
17 + if (error) {
18 + console.log(error);
19 + }
20 + console.log(results[0].cnt);
21 + dataNum = results[0].cnt;
22 + });
23 +
24 + connection.query('SELECT id,latitude,longitude FROM SHOW_DATA', function (error, results, field) {
25 + if (error) {
26 + console.log(error);
27 + }
28 + console.log([lat, lon]);
29 + for (var i = 0; i < dataNum; i++) {
30 + var latgap = (lat - results[i].latitude) * 110;
31 + var longap = (lon - results[i].longitude) * 91;
32 + var cal = latgap * latgap + longap * longap;
33 +
34 + //내 위치 반경 키로수 ^ 2만큼 cal 값 push -> content 위치
35 + if (cal <= 1600) {
36 + console.log(results[i].id);
37 + near_show_list.push([results[i].id, results[i].latitude, results[i].longitude]);
38 + }
39 + }
40 + });
41 +
42 + connection.end();
43 + // return near_show_list;
44 + }
45 +}
...@@ -9,7 +9,14 @@ router.get('/', function (req, res, next) { ...@@ -9,7 +9,14 @@ router.get('/', function (req, res, next) {
9 9
10 /* GET home page. */ 10 /* GET home page. */
11 router.get('/login', function (req, res, next) { 11 router.get('/login', function (req, res, next) {
12 - res.render('login.html', { title: 'Login1' }); 12 + res.render('login.html', { title: 'Login' });
13 console.log('로그인 페이지 접속 성공'); 13 console.log('로그인 페이지 접속 성공');
14 }); 14 });
15 +
16 +/* GET home page. */
17 +router.get('/map', function (req, res, next) {
18 + res.render('map_sql.html');
19 + console.log('현위치 기반 content 마킹 성공');
20 +});
21 +
15 module.exports = router; 22 module.exports = router;
...\ No newline at end of file ...\ No newline at end of file
......
1 +<!DOCTYPE html>
2 +<html>
3 +
4 +<head>
5 + <meta charset="utf-8">
6 + <title>geolocation으로 마커 표시하기</title>
7 +
8 +</head>
9 +
10 +<body>
11 + <p style="margin-top:-12px">
12 + <b>Chrome 브라우저는 https 환경에서만 geolocation을 지원합니다.</b> 참고해주세요.
13 + </p>
14 + <div id="map" style="width:500px;height:350px;"></div>
15 +
16 + <script type="text/javascript"
17 + src="//dapi.kakao.com/v2/maps/sdk.js?appkey=a3386042ab2e0550ea06d265855b452c">//kakao map api 주소 받아옴</script>
18 + <script>
19 + const near = require('database.js');
20 +
21 + var mapContainer = document.getElementById('map'), // 지도를 표시할 div
22 + mapOption = {
23 + center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
24 + level: 10 // 지도의 확대 레벨
25 + };
26 +
27 + var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
28 +
29 + // HTML5의 geolocation으로 사용할 수 있는지 확인합니다
30 + if (navigator.geolocation) {
31 +
32 + // GeoLocation을 이용해서 접속 위치를 얻어옵니다
33 + navigator.geolocation.getCurrentPosition(function (position) {
34 +
35 + var lat = position.coords.latitude, // 위도
36 + lon = position.coords.longitude; // 경도
37 + console.log(lat);
38 + console.log(lon);
39 + var locPosition = new kakao.maps.LatLng(lat, lon), // 마커가 표시될 위치를 geolocation으로 얻어온 좌표로 생성합니다
40 + message = '<div style="padding:5px;">여기에 계신가요?!</div>'; // 인포윈도우에 표시될 내용입니다
41 +
42 + // 마커와 인포윈도우를 표시합니다
43 + displayMarker(locPosition, message);
44 + });
45 +
46 + } else { // HTML5의 GeoLocation을 사용할 수 없을때 마커 표시 위치와 인포윈도우 내용을 설정합니다
47 +
48 + var locPosition = new kakao.maps.LatLng(33.450701, 126.570667),
49 + message = 'geolocation을 사용할수 없어요..'
50 +
51 + displayMarker(locPosition, message);
52 + }
53 +
54 +
55 +
56 +
57 + displayShows();
58 + function displayShows() {
59 + var imageSrc = "https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png";
60 + var near_list = near(lat, lon);
61 + var positions = [];
62 + for (var i = 0; i < near_list.length; i++) {
63 + positions.push({
64 + title: id,
65 + lating: new kakao.maps.Lating(near_list[i][1], near_list[i][2])
66 + })
67 + }
68 + for (var i = 0; i < positions.length; i++) {
69 +
70 + // 마커 이미지의 이미지 크기 입니다
71 + var imageSize = new kakao.maps.Size(24, 35);
72 +
73 + // 마커 이미지를 생성합니다
74 + var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize);
75 +
76 + // 마커를 생성합니다
77 + var marker = new kakao.maps.Marker({
78 + map: map, // 마커를 표시할 지도
79 + position: positions[i].latlng, // 마커를 표시할 위치
80 + title: positions[i].title, // 마커의 타이틀, 마커에 마우스를 올리면 타이틀이 표시됩니다
81 + image: markerImage // 마커 이미지
82 + });
83 + }
84 + }
85 + // 지도에 마커와 인포윈도우를 표시하는 함수입니다
86 + function displayMarker(locPosition, message) {
87 +
88 + // 마커를 생성합니다
89 + var marker = new kakao.maps.Marker({
90 + map: map,
91 + position: locPosition
92 + });
93 +
94 + var iwContent = message, // 인포윈도우에 표시할 내용
95 + iwRemoveable = true;
96 +
97 + // 인포윈도우를 생성합니다
98 + var infowindow = new kakao.maps.InfoWindow({
99 + content: iwContent,
100 + removable: iwRemoveable
101 + });
102 +
103 + // 인포윈도우를 마커위에 표시합니다
104 + infowindow.open(map, marker);
105 +
106 + // 지도 중심좌표를 접속위치로 변경합니다
107 + map.setCenter(locPosition);
108 + }
109 + </script>
110 +</body>
111 +
112 +</html>
...\ No newline at end of file ...\ No newline at end of file