Jeongmin Seo / favorite_restaurant

Go to a project
Toggle navigation Toggle navigation pinning
Jeongmin Seo
e493c154 2 parents c6305272 aa269979

merge feature/Mapu_UI branch

Inline Side-by-side
Showing 4 changed files with 261 additions and 0 deletions
File mode changed
1 +<!DOCTYPE html>
2 +<html lang="en">
3 + <head>
4 + <meta charset="UTF-8" />
5 + <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6 + <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7 + <title>맛집지도</title>
8 + <meta name="author" content="양주미" />
9 + <meta name="description" content="맛집지도 서비스" />
10 + <meta
11 + name="keywords"
12 + content="맛집지도, 맛집추천, 실시간채팅"
13 + />
14 + <link rel="stylesheet" href="style.css" />
15 + </head>
16 +
17 + <body>
18 + <nav>
19 + <div class="inner">
20 + <div class="nav-container">
21 + <h1 class="nav-title">맛집지도</h1>
22 + <button class="nav-contact">Contact</button>
23 + </div>
24 + </div>
25 + </nav>
26 +
27 + <main>
28 + <section id="category">
29 + <div class="inner">
30 + <div class="category-container">
31 + <h2 class="category-title">💜맛집지도 카테고리를 선택해보세요💜</h2>
32 + <div class="category-list">
33 + <button class="category-item" id="korea">한식🍚</button
34 + ><button class="category-item" id="china">중식🍜</button
35 + ><button class="category-item" id="japan">일식🍙</button
36 + ><button class="category-item" id="america">양식🍝</button
37 + ><button class="category-item" id="wheat">분식🍭</button
38 + ><button class="category-item" id="meat">구이🍖</button
39 + ><button class="category-item" id="sushi">회/초밥🍣</button
40 + ><button class="category-item" id="etc">기타🍴</button>
41 + </div>
42 + </div>
43 + </div>
44 + </section>
45 + <!-- 카테고리 -->
46 + <div id="map" class="inner"></div>
47 +
48 + <!-- 카카오지도 -->
49 + </main>
50 +
51 + <script
52 + type="text/javascript"
53 + src="//dapi.kakao.com/v2/maps/sdk.js?appkey=2263ae9eb197ad864a94eb1ed7b912c9&libraries=services">
54 +</script>
55 +
56 + <script src="script.js"></script>
57 + </body>
58 +</html>
...\ No newline at end of file ...\ No newline at end of file
1 +/*인포윈도우 설정*/
2 +.infowindow {
3 + width : 25rem;
4 + border : 1px solid black;
5 + border-radius: 5px;
6 + background-color : white;
7 +}
8 +
9 +.infowindow-title {
10 + font-size: 3rem;
11 +}
12 +
13 +.infowindow-address {
14 + font-size: 1.6rem;
15 +}
16 +
17 +.infowindow-btn {
18 + font-size: 1.6rem;
19 +}
...\ No newline at end of file ...\ No newline at end of file
1 +/*********************************************************************************
2 + * 1. 지도 생성 및 확대 축소 컨트롤러
3 + */
4 +
5 +var container = document.getElementById('map'); //지도를 담을 영역의 DOM 레퍼런스
6 +var options = { //지도를 생성할 때 필요한 기본 옵션
7 + center: new kakao.maps.LatLng(37.54, 126.96), //지도의 중심좌표.
8 + level: 7 //지도의 레벨(확대, 축소 정도)
9 +};
10 +
11 +var map = new kakao.maps.Map(container, options); //지도 생성 및 객체 리턴
12 +
13 +// 확대 축소 컨트롤러
14 +var zoomControl = new kakao.maps.ZoomControl();
15 +map.addControl(zoomControl, kakao.maps.ControlPosition.RIGHT);
16 +
17 +/******************************************************************************
18 + * 2. 더미데이터 준비하기(제목, 주소, 카테고리)
19 + */
20 +
21 + const dataSet = [
22 + {
23 + title: "희락돈까스",
24 + address: "서울 영등포구 양산로 210",
25 + category: "양식",
26 + },
27 + {
28 + title: "즉석우동짜장",
29 + address: "서울 영등포구 대방천로 260",
30 + category: "한식",
31 + },
32 + {
33 + title: "아카사카",
34 + address: "서울 서초구 서초대로74길 23",
35 + category: "일식",
36 + },
37 + {
38 + title: "한우만",
39 + address: "서울 서초구 서초3동 효령로 216",
40 + category: "한식",
41 + },
42 +
43 + ];
44 +
45 +
46 +/******************************************************************************
47 + * 3. 여러개 마커찍기
48 + */
49 +
50 +// 주소-좌표 변환 객체를 생성합니다
51 +var geocoder = new kakao.maps.services.Geocoder();
52 +
53 +function getCoordsByAddress(address) {
54 + return new Promise((resolve, reject) => {
55 + // 주소로 좌표를 검색합니다
56 + geocoder.addressSearch(address, function (result, status) {
57 + // 정상적으로 검색이 완료됐으면
58 + if (status === kakao.maps.services.Status.OK) {
59 + var coords = new kakao.maps.LatLng(result[0].y, result[0].x);
60 + return resolve(coords);
61 + }
62 + reject(new Error("getCoordsByAddress Error: not valid Address"));
63 + });
64 + });
65 +}
66 +
67 +setMap(dataSet);
68 +
69 +/*
70 +*************************************************************
71 +4. 마커에 인포윈도우 붙이기
72 +*/
73 +
74 +function getContent(data) {
75 + // 인포윈도우 가공하기
76 + return `
77 + <div class="infowindow">
78 + <div class="infowindow-body">
79 + <h5 class="infowindow-title">${data.title}</h5>
80 + <p class="infowindow-address">${data.address}</p>
81 + <a href='/chat' class="infowindow-btn" target="_blank">채팅방이동</a>
82 + </div>
83 + </div>
84 + `;
85 +}
86 +
87 +async function setMap(dataSet) {
88 + for (var i = 0; i < dataSet.length; i++) {
89 + // 마커를 생성합니다
90 + let coords = await getCoordsByAddress(dataSet[i].address);
91 + var marker = new kakao.maps.Marker({
92 + map: map, // 마커를 표시할 지도
93 + position: coords,
94 + });
95 +
96 + markerArray.push(marker);
97 +
98 + // 마커에 표시할 인포윈도우를 생성합니다
99 + var infowindow = new kakao.maps.InfoWindow({
100 + content: getContent(dataSet[i]),// 인포윈도우에 표시할 내용
101 + });
102 +
103 + infowindowArray.push(infowindow);
104 +
105 + // 마커에 mouseover 이벤트와 mouseout 이벤트를 등록합니다
106 + // 이벤트 리스너로는 클로저를 만들어 등록합니다
107 + // for문에서 클로저를 만들어 주지 않으면 마지막 마커에만 이벤트가 등록됩니다
108 + kakao.maps.event.addListener(marker, 'click', makeOverListener(map, marker, infowindow, coords));
109 + kakao.maps.event.addListener(map, 'click', makeOutListener(infowindow));
110 + }
111 + }
112 +
113 + // 인포윈도우를 표시하는 클로저를 만드는 함수입니다
114 +function makeOverListener(map, marker, infowindow, coords) {
115 + return function() {
116 + // 1. 클릭시 다른 인포윈도우 닫기
117 + closeInfoWindow();
118 + infowindow.open(map, marker);
119 + // 2. 클릭한 곳으로 지도 중심 옮기기
120 + map.panTo(coords);
121 + };
122 +}
123 +
124 +let infowindowArray = [];
125 +function closeInfoWindow() {
126 + for (let infowindow of infowindowArray) {
127 + infowindow.close();
128 + }
129 +}
130 +
131 +// 인포윈도우를 닫는 클로저를 만드는 함수입니다
132 +function makeOutListener(infowindow) {
133 + return function() {
134 + infowindow.close();
135 + };
136 +}
137 +
138 +/*
139 +**********************************************
140 +5. 카테고리 분류
141 +*/
142 +
143 +// 카테고리
144 +const categoryMap = {
145 + korea: "한식",
146 + china: "중식",
147 + japan: "일식",
148 + america: "양식",
149 + wheat: "분식",
150 + meat: "구이",
151 + sushi: "회/초밥",
152 + etc: "기타",
153 + };
154 +
155 +const categoryList = document.querySelector(".category-list");
156 +categoryList.addEventListener("click", categoryHandler);
157 +
158 +function categoryHandler(event) {
159 + const categoryId = event.target.id;
160 + const category = categoryMap[categoryId];
161 +
162 + // 데이터 분류
163 + let categorizedDataSet = [];
164 + for (let data of dataSet) {
165 + if (data.category === category) {
166 + categorizedDataSet.push(data);
167 + }
168 + }
169 +
170 + // 기존 마커 삭제
171 + closeMarker();
172 +
173 + // 기존 인포윈도우 닫기
174 + closeInfoWindow();
175 +
176 + setMap(categorizedDataSet);
177 +}
178 +
179 +let markerArray = [];
180 +function closeMarker() {
181 + for (marker of markerArray) {
182 + marker.setMap(null);
183 + }
184 +}
...\ No newline at end of file ...\ No newline at end of file