Showing
5 changed files
with
179 additions
and
0 deletions
map_sql/database.json
0 → 100644
map_sql/findShow.js
0 → 100644
1 | +//해당 아이디를 불러와서 lat lon 받아서 지도 출력 | ||
2 | +//지도 생성 | ||
3 | +//해당 위치 표시 | ||
4 | + | ||
5 | +const fs = require('fs'); | ||
6 | +const express = require('express'); | ||
7 | + | ||
8 | +const data = fs.readFileSync('./showData.json'); | ||
9 | +const conf = JSON.parse(data); | ||
10 | +const mysql = require('mysql'); | ||
11 | + | ||
12 | +const connection = mysql.createConnection({ | ||
13 | + host: conf.host, | ||
14 | + user: conf.user, | ||
15 | + password: conf.password, | ||
16 | + port: conf.port, | ||
17 | + database: conf.database | ||
18 | +}); | ||
19 | +connection.connect(); //연결 | ||
20 | + | ||
21 | +app.get('위치(에 접속한 경우 쿼리를 날려준다.)') | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
map_sql/map_sql.html
0 → 100644
1 | +<!DOCTYPE html> | ||
2 | +<html> | ||
3 | +<head> | ||
4 | + <meta charset="utf-8"> | ||
5 | + <title>geolocation으로 마커 표시하기</title> | ||
6 | + | ||
7 | +</head> | ||
8 | +<body> | ||
9 | +<p style="margin-top:-12px"> | ||
10 | + <b>Chrome 브라우저는 https 환경에서만 geolocation을 지원합니다.</b> 참고해주세요. | ||
11 | +</p> | ||
12 | +<div id="map" style="width:500px;height:350px;"></div> | ||
13 | + | ||
14 | +<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=a3386042ab2e0550ea06d265855b452c">//kakao map api 주소 받아옴</script> | ||
15 | +<script> | ||
16 | +const near=require('study.js'); | ||
17 | + | ||
18 | +var mapContainer = document.getElementById('map'), // 지도를 표시할 div | ||
19 | + mapOption = { | ||
20 | + center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표 | ||
21 | + level: 10 // 지도의 확대 레벨 | ||
22 | + }; | ||
23 | + | ||
24 | +var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다 | ||
25 | + | ||
26 | +// HTML5의 geolocation으로 사용할 수 있는지 확인합니다 | ||
27 | +if (navigator.geolocation) { | ||
28 | + | ||
29 | + // GeoLocation을 이용해서 접속 위치를 얻어옵니다 | ||
30 | + navigator.geolocation.getCurrentPosition(function(position) { | ||
31 | + | ||
32 | + var lat = position.coords.latitude, // 위도 | ||
33 | + lon = position.coords.longitude; // 경도 | ||
34 | + console.log(lat); | ||
35 | + console.log(lon); | ||
36 | + var locPosition = new kakao.maps.LatLng(lat, lon), // 마커가 표시될 위치를 geolocation으로 얻어온 좌표로 생성합니다 | ||
37 | + message = '<div style="padding:5px;">여기에 계신가요?!</div>'; // 인포윈도우에 표시될 내용입니다 | ||
38 | + | ||
39 | + // 마커와 인포윈도우를 표시합니다 | ||
40 | + displayMarker(locPosition, message); | ||
41 | + | ||
42 | + }); | ||
43 | + | ||
44 | +} else { // HTML5의 GeoLocation을 사용할 수 없을때 마커 표시 위치와 인포윈도우 내용을 설정합니다 | ||
45 | + | ||
46 | + var locPosition = new kakao.maps.LatLng(33.450701, 126.570667), | ||
47 | + message = 'geolocation을 사용할수 없어요..' | ||
48 | + | ||
49 | + displayMarker(locPosition, message); | ||
50 | +} | ||
51 | + | ||
52 | + | ||
53 | + | ||
54 | + | ||
55 | +displayShows(); | ||
56 | +function displayShows(){ | ||
57 | + var imageSrc = "https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png"; | ||
58 | + var near_list=near(lat,lon); | ||
59 | + var positions=[]; | ||
60 | + for(var i =0;i<near_list.length;i++){ | ||
61 | + positions.push({title: id, | ||
62 | + lating: new kaka0.maps.Lating(near_list[i][1],near_list[i][2])}) | ||
63 | + } | ||
64 | +for (var i = 0; i < positions.length; i ++) { | ||
65 | + | ||
66 | + // 마커 이미지의 이미지 크기 입니다 | ||
67 | + var imageSize = new kakao.maps.Size(24, 35); | ||
68 | + | ||
69 | + // 마커 이미지를 생성합니다 | ||
70 | + var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize); | ||
71 | + | ||
72 | + // 마커를 생성합니다 | ||
73 | + var marker = new kakao.maps.Marker({ | ||
74 | + map: map, // 마커를 표시할 지도 | ||
75 | + position: positions[i].latlng, // 마커를 표시할 위치 | ||
76 | + title : positions[i].title, // 마커의 타이틀, 마커에 마우스를 올리면 타이틀이 표시됩니다 | ||
77 | + image : markerImage // 마커 이미지 | ||
78 | + }); | ||
79 | + } | ||
80 | +} | ||
81 | +// 지도에 마커와 인포윈도우를 표시하는 함수입니다 | ||
82 | +function displayMarker(locPosition, message) { | ||
83 | + | ||
84 | + // 마커를 생성합니다 | ||
85 | + var marker = new kakao.maps.Marker({ | ||
86 | + map: map, | ||
87 | + position: locPosition | ||
88 | + }); | ||
89 | + | ||
90 | + var iwContent = message, // 인포윈도우에 표시할 내용 | ||
91 | + iwRemoveable = true; | ||
92 | + | ||
93 | + // 인포윈도우를 생성합니다 | ||
94 | + var infowindow = new kakao.maps.InfoWindow({ | ||
95 | + content : iwContent, | ||
96 | + removable : iwRemoveable | ||
97 | + }); | ||
98 | + | ||
99 | + // 인포윈도우를 마커위에 표시합니다 | ||
100 | + infowindow.open(map, marker); | ||
101 | + | ||
102 | + // 지도 중심좌표를 접속위치로 변경합니다 | ||
103 | + map.setCenter(locPosition); | ||
104 | +} | ||
105 | +</script> | ||
106 | +</body> | ||
107 | +</html> | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
map_sql/show_database.json
0 → 100644
This diff is collapsed. Click to expand it.
map_sql/study.js
0 → 100644
1 | +var mysql = require('mysql'); | ||
2 | + | ||
3 | +module.exports={ | ||
4 | + nearShow: 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 | + if(cal<=1600){ | ||
34 | + console.log(results[i].id); | ||
35 | + near_show_list.push([results[i].id,results[i].latitude,results[i].longitude]); | ||
36 | + } | ||
37 | + } | ||
38 | + }); | ||
39 | + | ||
40 | + connection.end(); | ||
41 | + return near_show_list; | ||
42 | + } | ||
43 | +} |
-
Please register or login to post a comment