김서연

수정

1 -<!DOCTYPE html>
2 -<html>
3 -<head>
4 - <meta charset="utf-8">
5 - <title>백신 접종 가능기관</title>
6 -
7 -</head>
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 -
19 - <div id="map" style="width: 700px;height:400px;"></div>
20 - <script type="text/javascript" src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=35fccf4b4e2a3179187346f26ed3f988&libraries=services"></script>
21 - <script>
22 - var mapContainer = document.getElementById('map'), // 지도를 표시할 div
23 - mapOption = {
24 - center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
25 - level: 3 // 지도의 확대 레벨
26 - };
27 -
28 - // 지도를 생성합니다
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 - });
47 -
48 - // 인포윈도우로 장소에 대한 설명을 표시합니다
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);
53 -
54 - // 지도의 중심을 결과값으로 받은 위치로 이동시킵니다
55 - map.setCenter(coords);
56 - }
57 - });
58 - geocoder.addressSearch('서울특별시 동대문구 회기로 173', function(result, status) {
59 -
60 - // 정상적으로 검색이 완료됐으면
61 - if (status === kakao.maps.services.Status.OK) {
62 -
63 - var coords = new kakao.maps.LatLng(result[0].y, result[0].x);
64 -
65 - // 결과값으로 받은 위치를 마커로 표시합니다
66 - var marker = new kakao.maps.Marker({
67 - map: map,
68 - position: coords
69 - });
70 -
71 - // 인포윈도우로 장소에 대한 설명을 표시합니다
72 - var infowindow = new kakao.maps.InfoWindow({
73 - content: '<div style="width:150px;text-align:center;padding:6px 0;">기관명</div>'
74 - });
75 - infowindow.open(map, marker);
76 -
77 - // 지도의 중심을 결과값으로 받은 위치로 이동시킵니다
78 - map.setCenter(coords);
79 - }
80 - });
81 - </script>
82 -</body>
83 -</html>
...\ No newline at end of file ...\ No newline at end of file
1 -//- html
2 -//- head
3 -//- meta(charset='utf-8')
4 -//- body
5 -//- h1 COVID-19 의료기관 검색하기
6 -
7 -//- form(action='/' method="post")
8 -//- p
9 -//- input(type='text' name='region' placeholder='서울시')
10 -//- input(type='submit')
11 -
12 -//- //result값 있을때만
13 -//- if result!=NULL
14 -//- table
15 -//- tr
16 -//- th 기관명
17 -//- th 기관 전화번호
18 -//- th 기관 주소
19 -//- th 휴무일 여부
20 -//- th 점심 시작시간
21 -//- th 점심 종료시간
22 -//- th 진료 시작기간
23 -//- th 진료 종료시간
24 -//- -for(i=1; i<result.length; i++)
25 -//- tr
26 -//- td= result[i].orgnm
27 -//- td= result[i].orgTlno
28 -//- td= result[i].orgZipaddr
29 -//- td= result[i].hldyYn
30 -//- td= result[i].lunchSttTm
31 -//- td= result[i].lunchEndTm
32 -//- td= result[i].sttTm
33 -//- td= result[i].endTm
34 -
35 -
36 -
37 -
38 -
...\ No newline at end of file ...\ No newline at end of file