Showing
4 changed files
with
69 additions
and
35 deletions
... | @@ -8,6 +8,8 @@ app.locals.pretty=true; | ... | @@ -8,6 +8,8 @@ app.locals.pretty=true; |
8 | app.set('views','./views') | 8 | app.set('views','./views') |
9 | app.set('view engine','pug'); | 9 | app.set('view engine','pug'); |
10 | app.use(express.static('public')); | 10 | app.use(express.static('public')); |
11 | +var http = require('http'); | ||
12 | +var fs = require('fs'); | ||
11 | 13 | ||
12 | //?page=페이지번호&?perPage=페이지당 데이터수 | 14 | //?page=페이지번호&?perPage=페이지당 데이터수 |
13 | const $base_url = `https://api.odcloud.kr/api/apnmOrg/v1/list`; | 15 | const $base_url = `https://api.odcloud.kr/api/apnmOrg/v1/list`; |
... | @@ -35,17 +37,28 @@ app.post('/',function(req,res,next){ | ... | @@ -35,17 +37,28 @@ app.post('/',function(req,res,next){ |
35 | 37 | ||
36 | // console.log(searchList); | 38 | // console.log(searchList); |
37 | //result라는 변수에 담아 결과 보내기 | 39 | //result라는 변수에 담아 결과 보내기 |
38 | - res.render('main', {result:searchList}); | 40 | + res.render('main', {result:searchList }); |
41 | + | ||
39 | }) | 42 | }) |
40 | 43 | ||
41 | }) | 44 | }) |
42 | 45 | ||
46 | +app.get('/',function(req,res){ | ||
47 | + res.writeHead(200, {'Content-Type': 'text/html'}); | ||
48 | + fs.readFile('./map/kakaomap.html', null, function(err,data){ | ||
49 | + if(err){ | ||
50 | + res.writeHead(404); | ||
51 | + res.write('error'); | ||
52 | + } | ||
53 | + else{ | ||
54 | + console.log('complete!'); | ||
55 | + res.write(data); | ||
56 | + } | ||
57 | + res.end(); | ||
58 | + }); | ||
59 | +}) | ||
43 | 60 | ||
44 | app.listen(3000,function(){ | 61 | app.listen(3000,function(){ |
45 | console.log('Connected 3000 port!'); | 62 | console.log('Connected 3000 port!'); |
46 | }); | 63 | }); |
47 | 64 | ||
48 | -app.get('/',function(req,res){ | ||
49 | - res.render('main'); | ||
50 | -}) | ||
51 | - | ... | ... |
app2.js
deleted
100644 → 0
1 | -var http = require('http'); | ||
2 | -var fs = require('fs'); | ||
3 | - | ||
4 | -function onRequest(req, res){ | ||
5 | - res.writeHead(200, {'Content-Type': 'text/html'}); | ||
6 | - fs.readFile('./map/map.html', null, function(err,data){ | ||
7 | - if(err){ | ||
8 | - res.writeHead(404); | ||
9 | - res.write('error'); | ||
10 | - } | ||
11 | - else{ | ||
12 | - console.log('complete!'); | ||
13 | - res.write(data); | ||
14 | - } | ||
15 | - res.end(); | ||
16 | - }); | ||
17 | -} | ||
18 | - | ||
19 | -http.createServer(onRequest).listen(3000); | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
... | @@ -6,6 +6,13 @@ | ... | @@ -6,6 +6,13 @@ |
6 | 6 | ||
7 | </head> | 7 | </head> |
8 | <body> | 8 | <body> |
9 | + <h1>COVID-19 의료기관 검색하기</h1> | ||
10 | + <form action="/" method="post"> | ||
11 | + <p> | ||
12 | + <input type="text" name="region" placeholder="서울시"/> | ||
13 | + <input type="submit"/> | ||
14 | + </p> | ||
15 | + </form> | ||
9 | <div id="map" style="width:700px;height:400px;"></div> | 16 | <div id="map" style="width:700px;height:400px;"></div> |
10 | 17 | ||
11 | <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> | ... | ... |
... | @@ -6,23 +6,56 @@ | ... | @@ -6,23 +6,56 @@ |
6 | 6 | ||
7 | </head> | 7 | </head> |
8 | <body> | 8 | <body> |
9 | + | ||
10 | + | ||
11 | + <h1>COVID-19 의료기관 검색하기</h1> | ||
12 | + <form action="/" method="post"> | ||
13 | + <p> | ||
14 | + <input type="text" name="region" placeholder="서울시"/> | ||
15 | + <input type="submit"/> | ||
16 | + </p> | ||
17 | + </form> | ||
18 | + | ||
9 | <div id="map" style="width: 700px;height:400px;"></div> | 19 | <div id="map" style="width: 700px;height:400px;"></div> |
10 | -<script type="text/javascript" src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=35fccf4b4e2a3179187346f26ed3f988&libraries=services"></script> | 20 | + <script type="text/javascript" src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=35fccf4b4e2a3179187346f26ed3f988&libraries=services"></script> |
11 | -<script> | 21 | + <script> |
12 | -var mapContainer = document.getElementById('map'), // 지도를 표시할 div | 22 | + var mapContainer = document.getElementById('map'), // 지도를 표시할 div |
13 | mapOption = { | 23 | mapOption = { |
14 | center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표 | 24 | center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표 |
15 | level: 3 // 지도의 확대 레벨 | 25 | level: 3 // 지도의 확대 레벨 |
16 | }; | 26 | }; |
17 | 27 | ||
18 | -// 지도를 생성합니다 | 28 | + // 지도를 생성합니다 |
19 | -var map = new kakao.maps.Map(mapContainer, mapOption); | 29 | + var map = new kakao.maps.Map(mapContainer, mapOption); |
30 | + | ||
31 | + // 주소-좌표 변환 객체를 생성합니다 | ||
32 | + var geocoder = new kakao.maps.services.Geocoder(); | ||
33 | + | ||
34 | + // 주소로 좌표를 검색합니다 | ||
35 | + geocoder.addressSearch('서울특별시 강동구 올림픽로 779', function(result, status) { | ||
36 | + | ||
37 | + // 정상적으로 검색이 완료됐으면 | ||
38 | + if (status === kakao.maps.services.Status.OK) { | ||
39 | + | ||
40 | + var coords = new kakao.maps.LatLng(result[0].y, result[0].x); | ||
41 | + | ||
42 | + // 결과값으로 받은 위치를 마커로 표시합니다 | ||
43 | + var marker = new kakao.maps.Marker({ | ||
44 | + map: map, | ||
45 | + position: coords | ||
46 | + }); | ||
20 | 47 | ||
21 | -// 주소-좌표 변환 객체를 생성합니다 | 48 | + // 인포윈도우로 장소에 대한 설명을 표시합니다 |
22 | -var geocoder = new kakao.maps.services.Geocoder(); | 49 | + var infowindow = new kakao.maps.InfoWindow({ |
50 | + content: '<div style="width:150px;text-align:center;padding:6px 0;">기관명</div>' | ||
51 | + }); | ||
52 | + infowindow.open(map, marker); | ||
23 | 53 | ||
24 | -// 주소로 좌표를 검색합니다 | 54 | + // 지도의 중심을 결과값으로 받은 위치로 이동시킵니다 |
25 | -geocoder.addressSearch('경희대로26', function(result, status) { | 55 | + map.setCenter(coords); |
56 | + } | ||
57 | + }); | ||
58 | + geocoder.addressSearch('서울특별시 동대문구 회기로 173', function(result, status) { | ||
26 | 59 | ||
27 | // 정상적으로 검색이 완료됐으면 | 60 | // 정상적으로 검색이 완료됐으면 |
28 | if (status === kakao.maps.services.Status.OK) { | 61 | if (status === kakao.maps.services.Status.OK) { |
... | @@ -44,7 +77,7 @@ geocoder.addressSearch('경희대로26', function(result, status) { | ... | @@ -44,7 +77,7 @@ geocoder.addressSearch('경희대로26', function(result, status) { |
44 | // 지도의 중심을 결과값으로 받은 위치로 이동시킵니다 | 77 | // 지도의 중심을 결과값으로 받은 위치로 이동시킵니다 |
45 | map.setCenter(coords); | 78 | map.setCenter(coords); |
46 | } | 79 | } |
47 | -}); | 80 | + }); |
48 | -</script> | 81 | + </script> |
49 | </body> | 82 | </body> |
50 | </html> | 83 | </html> |
... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
-
Please register or login to post a comment