김서연 / Corona_Vaccination_Medical_Institution

Go to a project
Toggle navigation Toggle navigation pinning
김서연
c4c85a3d 1 parent 94b4f4db

지역 검색후 지도에 마커 띄우기

Inline Side-by-side
Showing 5 changed files with 264 additions and 84 deletions
...@@ -3,10 +3,14 @@ var bodyParser = require('body-parser'); ...@@ -3,10 +3,14 @@ var bodyParser = require('body-parser');
3 var request = require('request'); 3 var request = require('request');
4 var cheerio = require('cheerio'); 4 var cheerio = require('cheerio');
5 var app =express(); 5 var app =express();
6 +app.set('view engine','ejs');
7 +app.set('views','./views')
6 app.use(express.urlencoded( {extended : false } )); 8 app.use(express.urlencoded( {extended : false } ));
9 +
7 app.locals.pretty=true; 10 app.locals.pretty=true;
8 -app.set('views','./views') 11 +
9 -app.set('view engine','pug'); 12 +// app.set('view engine','pug');
13 +
10 app.use(express.static('public')); 14 app.use(express.static('public'));
11 var http = require('http'); 15 var http = require('http');
12 var fs = require('fs'); 16 var fs = require('fs');
...@@ -26,7 +30,7 @@ app.post('/',function(req,res,next){ ...@@ -26,7 +30,7 @@ app.post('/',function(req,res,next){
26 30
27 request($api_url,function(err,response,body){ 31 request($api_url,function(err,response,body){
28 if(err) throw err; 32 if(err) throw err;
29 - 33 + // console.log(body);
30 //data부분만 추출 34 //data부분만 추출
31 var obj = JSON.parse(body).data; 35 var obj = JSON.parse(body).data;
32 // console.log(obj); 36 // console.log(obj);
...@@ -37,25 +41,27 @@ app.post('/',function(req,res,next){ ...@@ -37,25 +41,27 @@ app.post('/',function(req,res,next){
37 41
38 // console.log(searchList); 42 // console.log(searchList);
39 //result라는 변수에 담아 결과 보내기 43 //result라는 변수에 담아 결과 보내기
40 - res.render('main', {result:searchList }); 44 + var hey = searchList[0].orgZipaddr.split(',');
45 + res.render('index', {result:JSON.stringify(searchList) });
41 46
42 }) 47 })
43 48
44 }) 49 })
45 50
46 app.get('/',function(req,res){ 51 app.get('/',function(req,res){
47 - res.writeHead(200, {'Content-Type': 'text/html'}); 52 + res.render('index');
48 - fs.readFile('./map/kakaomap.html', null, function(err,data){ 53 + // res.writeHead(200, {'Content-Type': 'text/html'});
49 - if(err){ 54 + // fs.readFile('./map/kakaomap.html', null, function(err,data){
50 - res.writeHead(404); 55 + // if(err){
51 - res.write('error'); 56 + // res.writeHead(404);
52 - } 57 + // res.write('error');
53 - else{ 58 + // }
54 - console.log('complete!'); 59 + // else{
55 - res.write(data); 60 + // console.log('complete!');
56 - } 61 + // res.write(data);
57 - res.end(); 62 + // }
58 - }); 63 + // res.end();
64 + // });
59 }) 65 })
60 66
61 app.listen(3000,function(){ 67 app.listen(3000,function(){
......
...@@ -13,56 +13,79 @@ ...@@ -13,56 +13,79 @@
13 <input type="submit"/> 13 <input type="submit"/>
14 </p> 14 </p>
15 </form> 15 </form>
16 -<div id="map" style="width:700px;height:400px;"></div> 16 + <div id="map" style="width:700px;height:400px;"></div>
17 17
18 -<script type="text/javascript" src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=35fccf4b4e2a3179187346f26ed3f988"></script> 18 + <script type="text/javascript" src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=35fccf4b4e2a3179187346f26ed3f988"></script>
19 +
20 +
19 <script> 21 <script>
20 var mapContainer = document.getElementById('map'), // 지도를 표시할 div 22 var mapContainer = document.getElementById('map'), // 지도를 표시할 div
21 mapOption = { 23 mapOption = {
22 - center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표 24 + center: new kakao.maps.LatLng(37.596672, 127.051950), // 지도의 중심좌표
23 level: 3 // 지도의 확대 레벨 25 level: 3 // 지도의 확대 레벨
24 }; 26 };
25 27
26 var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다 28 var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
27 29
28 -// 마커를 표시할 위치와 내용을 가지고 있는 객체 배열입니다
29 -var positions = [
30 - {
31 - content: '<div>카카오</div>',
32 - latlng: new kakao.maps.LatLng(33.450705, 126.570677)
33 - },
34 - {
35 - content: '<div>생태연못</div>',
36 - latlng: new kakao.maps.LatLng(33.450936, 126.569477)
37 - },
38 - {
39 - content: '<div>텃밭</div>',
40 - latlng: new kakao.maps.LatLng(33.450879, 126.569940)
41 - },
42 - {
43 - content: '<div>근린공원</div>',
44 - latlng: new kakao.maps.LatLng(33.451393, 126.570738)
45 - }
46 -];
47 30
48 -for (var i = 0; i < positions.length; i ++) {
49 - // 마커를 생성합니다
50 - var marker = new kakao.maps.Marker({
51 - map: map, // 마커를 표시할 지도
52 - position: positions[i].latlng // 마커의 위치
53 - });
54 31
55 - // 마커에 표시할 인포윈도우를 생성합니다 32 +// 지도 확대 축소를 제어할 수 있는 줌 컨트롤을 생성합니다
56 - var infowindow = new kakao.maps.InfoWindow({ 33 +var zoomControl = new kakao.maps.ZoomControl();
57 - content: positions[i].content // 인포윈도우에 표시할 내용 34 +map.addControl(zoomControl, kakao.maps.ControlPosition.RIGHT);
35 +
36 +var listData = "<%= result %>";
37 +console.log(listData[1]);
38 +//입력되는 배열명이 listData로 들어오면 됨.
39 +listData.forEach(function(addr, index) {
40 + var tmpaddr = addr[0].split(',');
41 + console.log(tmpaddr);
42 + geocoder.addressSearch(tmpaddr[0], function(result, status) {
43 + if (status === daum.maps.services.Status.OK) {
44 + var coords = new daum.maps.LatLng(result[0].y, result[0].x);
45 +
46 + var marker = new daum.maps.Marker({
47 + position: coords,
48 + clickable: true});
49 +
50 + // 마커를 지도에 표시합니다.
51 + marker.setMap(map);
52 +
53 + // 인포윈도우를 생성합니다
54 + var infowindow = new kakao.maps.InfoWindow({
55 + content: '<div style="width:150px;text-align:center;padding:6px 0;">' + addr[1] + '</div>',
56 + removable : true
57 + });
58 + // 마커에 클릭이벤트를 등록합니다
59 + kakao.maps.event.addListener(marker, 'click', function() {
60 + // 마커 위에 인포윈도우를 표시합니다
61 + infowindow.open(map, marker);
62 + });
63 + }
58 }); 64 });
65 +
66 +});
59 67
60 - // 마커에 mouseover 이벤트와 mouseout 이벤트를 등록합니다 68 +
61 - // 이벤트 리스너로는 클로저를 만들어 등록합니다 69 +
62 - // for문에서 클로저를 만들어 주지 않으면 마지막 마커에만 이벤트가 등록됩니다 70 +
63 - kakao.maps.event.addListener(marker, 'mouseover', makeOverListener(map, marker, infowindow)); 71 +// for (var i = 0; i < positions.length; i ++) {
64 - kakao.maps.event.addListener(marker, 'mouseout', makeOutListener(infowindow)); 72 +// // 마커를 생성합니다
65 -} 73 +// var marker = new kakao.maps.Marker({
74 +// map: map, // 마커를 표시할 지도
75 +// position: positions[i].latlng // 마커의 위치
76 +// });
77 +
78 +// // 마커에 표시할 인포윈도우를 생성합니다
79 +// var infowindow = new kakao.maps.InfoWindow({
80 +// content: positions[i].content // 인포윈도우에 표시할 내용
81 +// });
82 +
83 +// // 마커에 mouseover 이벤트와 mouseout 이벤트를 등록합니다
84 +// // 이벤트 리스너로는 클로저를 만들어 등록합니다
85 +// // for문에서 클로저를 만들어 주지 않으면 마지막 마커에만 이벤트가 등록됩니다
86 +// kakao.maps.event.addListener(marker, 'mouseover', makeOverListener(map, marker, infowindow));
87 +// kakao.maps.event.addListener(marker, 'mouseout', makeOutListener(infowindow));
88 +// }
66 89
67 // 인포윈도우를 표시하는 클로저를 만드는 함수입니다 90 // 인포윈도우를 표시하는 클로저를 만드는 함수입니다
68 function makeOverListener(map, marker, infowindow) { 91 function makeOverListener(map, marker, infowindow) {
...@@ -78,5 +101,68 @@ function makeOutListener(infowindow) { ...@@ -78,5 +101,68 @@ function makeOutListener(infowindow) {
78 }; 101 };
79 } 102 }
80 </script> 103 </script>
104 +
105 + <!-- <script>
106 + var mapContainer = document.getElementById('map'), // 지도를 표시할 div
107 + mapOption = {
108 + center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
109 + level: 3 // 지도의 확대 레벨
110 + };
111 +
112 + var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
113 +
114 + // 마커를 표시할 위치와 내용을 가지고 있는 객체 배열입니다
115 + var positions = [
116 + {
117 + content: '<div>카카오</div>',
118 + latlng: new kakao.maps.LatLng(33.450705, 126.570677)
119 + },
120 + {
121 + content: '<div>생태연못</div>',
122 + latlng: new kakao.maps.LatLng(33.450936, 126.569477)
123 + },
124 + {
125 + content: '<div>텃밭</div>',
126 + latlng: new kakao.maps.LatLng(33.450879, 126.569940)
127 + },
128 + {
129 + content: '<div>근린공원</div>',
130 + latlng: new kakao.maps.LatLng(33.451393, 126.570738)
131 + }
132 + ];
133 +
134 + for (var i = 0; i < positions.length; i ++) {
135 + // 마커를 생성합니다
136 + var marker = new kakao.maps.Marker({
137 + map: map, // 마커를 표시할 지도
138 + position: positions[i].latlng // 마커의 위치
139 + });
140 +
141 + // 마커에 표시할 인포윈도우를 생성합니다
142 + var infowindow = new kakao.maps.InfoWindow({
143 + content: positions[i].content // 인포윈도우에 표시할 내용
144 + });
145 +
146 + // 마커에 mouseover 이벤트와 mouseout 이벤트를 등록합니다
147 + // 이벤트 리스너로는 클로저를 만들어 등록합니다
148 + // for문에서 클로저를 만들어 주지 않으면 마지막 마커에만 이벤트가 등록됩니다
149 + kakao.maps.event.addListener(marker, 'mouseover', makeOverListener(map, marker, infowindow));
150 + kakao.maps.event.addListener(marker, 'mouseout', makeOutListener(infowindow));
151 + }
152 +
153 + // 인포윈도우를 표시하는 클로저를 만드는 함수입니다
154 + function makeOverListener(map, marker, infowindow) {
155 + return function() {
156 + infowindow.open(map, marker);
157 + };
158 + }
159 +
160 + // 인포윈도우를 닫는 클로저를 만드는 함수입니다
161 + function makeOutListener(infowindow) {
162 + return function() {
163 + infowindow.close();
164 + };
165 + }
166 + </script> -->
81 </body> 167 </body>
82 </html> 168 </html>
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -12,6 +12,7 @@ ...@@ -12,6 +12,7 @@
12 "@google/maps": "^1.1.3", 12 "@google/maps": "^1.1.3",
13 "body-parser": "^1.19.0", 13 "body-parser": "^1.19.0",
14 "cheerio": "^1.0.0-rc.9", 14 "cheerio": "^1.0.0-rc.9",
15 + "ejs": "^3.1.6",
15 "express": "^4.17.1", 16 "express": "^4.17.1",
16 "pug": "^3.0.2", 17 "pug": "^3.0.2",
17 "request": "^2.88.2", 18 "request": "^2.88.2",
......
1 +<!DOCTYPE html>
2 +<html>
3 +<head>
4 + <meta charset="utf-8">
5 + <title>여러개 마커에 이벤트 등록하기1</title>
6 +
7 +</head>
8 +<body>
9 +
10 + <h1>COVID-19 의료기관 검색하기</h1>
11 + <form action="/" method="post">
12 + <p>
13 + <input type="text" name="region" placeholder="서울시"/>
14 + <input type="submit"/>
15 + </p>
16 + </form>
17 +
18 + <div id="map" style="width:700px;height:400px;"></div>
19 + <script type="text/javascript" src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=35fccf4b4e2a3179187346f26ed3f988&libraries=services"></script>
20 +
21 + <script>
22 + var mapContainer = document.getElementById('map'), // 지도를 표시할 div
23 + mapOption = {
24 + center: new kakao.maps.LatLng(37.596672, 127.051950), // 지도의 중심좌표
25 + level: 3 // 지도의 확대 레벨
26 + };
27 +
28 + var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
29 + var geocoder = new kakao.maps.services.Geocoder();
30 + // 지도 확대 축소를 제어할 수 있는 줌 컨트롤을 생성합니다
31 + var zoomControl = new kakao.maps.ZoomControl();
32 + map.addControl(zoomControl, kakao.maps.ControlPosition.RIGHT);
33 +
34 + var listData = "<%= result %>";
35 + listData = listData.replaceAll('&#34;','\"');
36 + listData = JSON.parse(listData);
37 +
38 + console.log(listData);
39 + // console.log(listData[1]);
40 + //입력되는 배열명이 listData로 들어오면 됨.
41 + listData.forEach(function(addr, index) {
42 + var tmpaddr = ((addr.orgZipaddr).split(','))[0];
43 + console.log(tmpaddr);
44 + console.log("h");
45 + geocoder.addressSearch(tmpaddr, function(result, status) {
46 + if (status === kakao.maps.services.Status.OK) {
47 + var coords = new kakao.maps.LatLng(result[0].y, result[0].x);
48 +
49 + var marker = new kakao.maps.Marker({
50 + position: coords,
51 + clickable: true});
52 +
53 + // 마커를 지도에 표시합니다.
54 + marker.setMap(map);
55 +
56 + // 인포윈도우를 생성합니다
57 + var infowindow = new kakao.maps.InfoWindow({
58 + content: '<div style="width:150px;text-align:center;padding:6px 0;">' + addr[1] + '</div>',
59 + removable : true
60 + });
61 + // 마커에 클릭이벤트를 등록합니다
62 + kakao.maps.event.addListener(marker, 'click', function() {
63 + // 마커 위에 인포윈도우를 표시합니다
64 + infowindow.open(map, marker);
65 + });
66 + }
67 + });
68 +
69 + });
70 +
71 + // 인포윈도우를 표시하는 클로저를 만드는 함수입니다
72 + function makeOverListener(map, marker, infowindow) {
73 + return function() {
74 + infowindow.open(map, marker);
75 + };
76 + }
77 +
78 + // 인포윈도우를 닫는 클로저를 만드는 함수입니다
79 + function makeOutListener(infowindow) {
80 + return function() {
81 + infowindow.close();
82 + };
83 + }
84 + </script>
85 +
86 +</body>
87 +</html>
...\ No newline at end of file ...\ No newline at end of file
1 -html 1 +//- html
2 - head 2 +//- head
3 - meta(charset='utf-8') 3 +//- meta(charset='utf-8')
4 - body 4 +//- body
5 - h1 COVID-19 의료기관 검색하기 5 +//- h1 COVID-19 의료기관 검색하기
6 6
7 - form(action='/' method="post") 7 +//- form(action='/' method="post")
8 - p 8 +//- p
9 - input(type='text' name='region' placeholder='서울시') 9 +//- input(type='text' name='region' placeholder='서울시')
10 - input(type='submit') 10 +//- input(type='submit')
11 11
12 - //result값 있을때만 12 +//- //result값 있을때만
13 - if result!=NULL 13 +//- if result!=NULL
14 - table 14 +//- table
15 - tr 15 +//- tr
16 - th 기관명 16 +//- th 기관명
17 - th 기관 전화번호 17 +//- th 기관 전화번호
18 - th 기관 주소 18 +//- th 기관 주소
19 - th 휴무일 여부 19 +//- th 휴무일 여부
20 - th 점심 시작시간 20 +//- th 점심 시작시간
21 - th 점심 종료시간 21 +//- th 점심 종료시간
22 - th 진료 시작기간 22 +//- th 진료 시작기간
23 - th 진료 종료시간 23 +//- th 진료 종료시간
24 - -for(i=1; i<result.length; i++) 24 +//- -for(i=1; i<result.length; i++)
25 - tr 25 +//- tr
26 - td= result[i].orgnm 26 +//- td= result[i].orgnm
27 - td= result[i].orgTlno 27 +//- td= result[i].orgTlno
28 - td= result[i].orgZipaddr 28 +//- td= result[i].orgZipaddr
29 - td= result[i].hldyYn 29 +//- td= result[i].hldyYn
30 - td= result[i].lunchSttTm 30 +//- td= result[i].lunchSttTm
31 - td= result[i].lunchEndTm 31 +//- td= result[i].lunchEndTm
32 - td= result[i].sttTm 32 +//- td= result[i].sttTm
33 - td= result[i].endTm 33 +//- td= result[i].endTm
34 34
35 35
36 36
......