이유제 / CultureGallery

Go to a project
Toggle navigation Toggle navigation pinning
YujeLee
74d0aea0 1 parent 45d341fd

Backend: maptest.html 생성 및 map 관련 기능 개선

Inline Side-by-side
Showing 2 changed files with 203 additions and 9 deletions
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
16 <script type="text/javascript" 16 <script type="text/javascript"
17 src="//dapi.kakao.com/v2/maps/sdk.js?appkey=a3386042ab2e0550ea06d265855b452c">//kakao map api 주소 받아옴</script> 17 src="//dapi.kakao.com/v2/maps/sdk.js?appkey=a3386042ab2e0550ea06d265855b452c">//kakao map api 주소 받아옴</script>
18 <script> 18 <script>
19 - const near = require('study.js'); 19 + var mysql = require('mysql');
20 20
21 var mapContainer = document.getElementById('map'), // 지도를 표시할 div 21 var mapContainer = document.getElementById('map'), // 지도를 표시할 div
22 mapOption = { 22 mapOption = {
...@@ -51,21 +51,60 @@ ...@@ -51,21 +51,60 @@
51 displayMarker(locPosition, message); 51 displayMarker(locPosition, message);
52 } 52 }
53 53
54 + /////////// sql 데이터 불러옴 /////////////////
55 + var near_show_list = [];
56 + var connection = mysql.createConnection({
57 + "host": "culturegallery.cm2bwcuyukrm.us-east-1.rds.amazonaws.com",
58 + "user": "root",
59 + "password": "dldbwp1207",
60 + "port": "3306",
61 + "database": "showdata"
62 + });
63 +
64 + connection.connect();
65 + var dataNum = 0;
66 + connection.query('SELECT COUNT (*) AS cnt FROM SHOW_DATA', function (error, results, field) {
67 + if (error) {
68 + console.log(error);
69 + }
70 + console.log(results[0].cnt);
71 + dataNum = results[0].cnt;
72 + });
73 +
74 + connection.query('SELECT id,latitude,longitude FROM SHOW_DATA', function (error, results, field) {
75 + if (error) {
76 + console.log(error);
77 + }
78 + console.log([lat, lon]);
79 + for (var i = 0; i < dataNum; i++) {
80 + var latgap = (lat - results[i].latitude) * 110;
81 + var longap = (lon - results[i].longitude) * 91;
82 + var cal = latgap * latgap + longap * longap;
83 +
84 + //내 위치 반경 키로수 ^ 2만큼 cal 값 push -> content 위치
85 + if (cal <= 1600) {
86 + console.log(results[i].id);
87 + near_show_list.push([results[i].id, results[i].latitude, results[i].longitude]);
88 + }
89 + }
90 + });
54 91
92 + connection.end();
93 + ////////////////////////////////////////////////
55 94
56 95
57 - displayShows(); 96 + displayShows(near_show_list);
58 - function displayShows() { 97 + //// displayShows() 정의 ////
98 + function displayShows(near_list) {
59 var imageSrc = "https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png"; 99 var imageSrc = "https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png";
60 - var near_list = near(lat, lon); 100 + var kakao_near_list = [];
61 - var positions = [];
62 for (var i = 0; i < near_list.length; i++) { 101 for (var i = 0; i < near_list.length; i++) {
63 - positions.push({ 102 + kakao_near_list.push({
64 title: id, 103 title: id,
65 lating: new kakao.maps.Lating(near_list[i][1], near_list[i][2]) 104 lating: new kakao.maps.Lating(near_list[i][1], near_list[i][2])
66 }) 105 })
67 } 106 }
68 - for (var i = 0; i < positions.length; i++) { 107 + for (var i = 0; i < kakao_near_list.length; i++) {
69 108
70 // 마커 이미지의 이미지 크기 입니다 109 // 마커 이미지의 이미지 크기 입니다
71 var imageSize = new kakao.maps.Size(24, 35); 110 var imageSize = new kakao.maps.Size(24, 35);
...@@ -76,12 +115,14 @@ ...@@ -76,12 +115,14 @@
76 // 마커를 생성합니다 115 // 마커를 생성합니다
77 var marker = new kakao.maps.Marker({ 116 var marker = new kakao.maps.Marker({
78 map: map, // 마커를 표시할 지도 117 map: map, // 마커를 표시할 지도
79 - position: positions[i].latlng, // 마커를 표시할 위치 118 + position: kakao_near_list[i].latlng, // 마커를 표시할 위치
80 - title: positions[i].title, // 마커의 타이틀, 마커에 마우스를 올리면 타이틀이 표시됩니다 119 + title: kakao_near_list[i].title, // 마커의 타이틀, 마커에 마우스를 올리면 타이틀이 표시됩니다
81 image: markerImage // 마커 이미지 120 image: markerImage // 마커 이미지
82 }); 121 });
83 } 122 }
84 } 123 }
124 +
125 + /// displayMarker 함수 정의 ///
85 // 지도에 마커와 인포윈도우를 표시하는 함수입니다 126 // 지도에 마커와 인포윈도우를 표시하는 함수입니다
86 function displayMarker(locPosition, message) { 127 function displayMarker(locPosition, message) {
87 128
......
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 + var mysql = require('mysql');
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 + /////////// sql 데이터 불러옴 /////////////////
55 + var near_show_list = [];
56 + var connection = mysql.createConnection({
57 + "host": "culturegallery.cm2bwcuyukrm.us-east-1.rds.amazonaws.com",
58 + "user": "root",
59 + "password": "dldbwp1207",
60 + "port": "3306",
61 + "database": "showdata"
62 + });
63 +
64 + connection.connect();
65 + var dataNum = 0;
66 + connection.query('SELECT COUNT (*) AS cnt FROM SHOW_DATA', function (error, results, field) {
67 + if (error) {
68 + console.log(error);
69 + }
70 + console.log(results[0].cnt);
71 + dataNum = results[0].cnt;
72 + });
73 +
74 + connection.query('SELECT id,latitude,longitude FROM SHOW_DATA', function (error, results, field) {
75 + if (error) {
76 + console.log(error);
77 + }
78 + console.log([lat, lon]);
79 + for (var i = 0; i < dataNum; i++) {
80 + var latgap = (lat - results[i].latitude) * 110;
81 + var longap = (lon - results[i].longitude) * 91;
82 + var cal = latgap * latgap + longap * longap;
83 +
84 + //내 위치 반경 키로수 ^ 2만큼 cal 값 push -> content 위치
85 + if (cal <= 1600) {
86 + console.log(results[i].id);
87 + near_show_list.push([results[i].id, results[i].latitude, results[i].longitude]);
88 + }
89 + }
90 + });
91 +
92 + connection.end();
93 + ////////////////////////////////////////////////
94 +
95 +
96 + displayShows(near_show_list);
97 + //// displayShows() 정의 ////
98 + function displayShows(near_list) {
99 + var imageSrc = "https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png";
100 + var kakao_near_list = [];
101 + for (var i = 0; i < near_list.length; i++) {
102 + kakao_near_list.push({
103 + title: id,
104 + lating: new kakao.maps.Lating(near_list[i][1], near_list[i][2])
105 + })
106 + }
107 + for (var i = 0; i < kakao_near_list.length; i++) {
108 +
109 + // 마커 이미지의 이미지 크기 입니다
110 + var imageSize = new kakao.maps.Size(24, 35);
111 +
112 + // 마커 이미지를 생성합니다
113 + var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize);
114 +
115 + // 마커를 생성합니다
116 + var marker = new kakao.maps.Marker({
117 + map: map, // 마커를 표시할 지도
118 + position: kakao_near_list[i].latlng, // 마커를 표시할 위치
119 + title: kakao_near_list[i].title, // 마커의 타이틀, 마커에 마우스를 올리면 타이틀이 표시됩니다
120 + image: markerImage // 마커 이미지
121 + });
122 + }
123 + }
124 +
125 + /// displayMarker 함수 정의 ///
126 + // 지도에 마커와 인포윈도우를 표시하는 함수입니다
127 + function displayMarker(locPosition, message) {
128 +
129 + // 마커를 생성합니다
130 + var marker = new kakao.maps.Marker({
131 + map: map,
132 + position: locPosition
133 + });
134 +
135 + var iwContent = message, // 인포윈도우에 표시할 내용
136 + iwRemoveable = true;
137 +
138 + // 인포윈도우를 생성합니다
139 + var infowindow = new kakao.maps.InfoWindow({
140 + content: iwContent,
141 + removable: iwRemoveable
142 + });
143 +
144 + // 인포윈도우를 마커위에 표시합니다
145 + infowindow.open(map, marker);
146 +
147 + // 지도 중심좌표를 접속위치로 변경합니다
148 + map.setCenter(locPosition);
149 + }
150 + </script>
151 +</body>
152 +
153 +</html>
...\ No newline at end of file ...\ No newline at end of file