정성훈 / MEALKHU

Go to a project
Toggle navigation Toggle navigation pinning
swa07016
5af6b452 1 parent edb19f49

LandingMap 필터링 및 인포윈도우 구현

Inline Side-by-side
Showing 6 changed files with 141 additions and 45 deletions
...@@ -34,7 +34,7 @@ height: 100%; ...@@ -34,7 +34,7 @@ height: 100%;
34 </style> 34 </style>
35 <style> 35 <style>
36 body::-webkit-scrollbar { 36 body::-webkit-scrollbar {
37 - width: 10px; 37 + width: 8px;
38 background: transparent; 38 background: transparent;
39 } 39 }
40 body::-webkit-scrollbar-thumb { 40 body::-webkit-scrollbar-thumb {
......
1 /*global kakao*/ 1 /*global kakao*/
2 -import React, { useEffect, useState } from 'react' 2 +import React, { useEffect, useState } from "react";
3 -import appKey from '../config/appKey.json'; 3 +import { Input, Button, ButtonGroup } from "reactstrap";
4 +import { Label, CustomInput, Row, Col, FormGroup } from "reactstrap";
5 +import appKey from "../config/appKey.json";
4 6
5 const LandingMap = (props) => { 7 const LandingMap = (props) => {
6 8
7 - useEffect(()=>{
8 9
10 + const [FDatas, setFDatas] = useState([]);
11 + const [selectedOption, setselectedOption] = useState('');
12 +
13 + window.onload = function() {
14 + let init = document.getElementById('init');
15 + init.click();
16 + }
17 +
18 +
19 + useEffect(() => {
9 const script = document.createElement("script"); 20 const script = document.createElement("script");
10 script.async = true; 21 script.async = true;
11 - script.src = 22 + script.src = `https://dapi.kakao.com/v2/maps/sdk.js?appkey=${appKey.value}&autoload=false`;
12 - `https://dapi.kakao.com/v2/maps/sdk.js?appkey=${appKey.value}&autoload=false`;
13 document.head.appendChild(script); 23 document.head.appendChild(script);
14 24
15 script.onload = () => { 25 script.onload = () => {
26 + console.log(FDatas);
16 kakao.maps.load(() => { 27 kakao.maps.load(() => {
17 let container = document.getElementById("map"); 28 let container = document.getElementById("map");
18 let options = { 29 let options = {
19 - center: new kakao.maps.LatLng(37.2464876, 127.0768072), 30 + center: new kakao.maps.LatLng(37.2479109441, 127.0773045246),
20 - level: 3 31 + level: 3,
21 }; 32 };
22 let map = new window.kakao.maps.Map(container, options); 33 let map = new window.kakao.maps.Map(container, options);
23 let positions = []; 34 let positions = [];
24 // 마커 이미지를 생성합니다 35 // 마커 이미지를 생성합니다
25 // 마커 이미지의 이미지 크기 입니다 36 // 마커 이미지의 이미지 크기 입니다
26 let imageSize = new kakao.maps.Size(40, 40); 37 let imageSize = new kakao.maps.Size(40, 40);
27 - // let imageSrc = "https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png"; 38 + let imageSrc_cafe = "cafe_icon.png";
28 - let imageSrc_cafe = "https://cdn.icon-icons.com/icons2/882/PNG/512/1-68_icon-icons.com_68826.png"; 39 + let imageSrc_meal = "meal_icon.png";
29 - let imageSrc_meal = "https://cdn.icon-icons.com/icons2/882/PNG/512/1-63_icon-icons.com_68800.png"; 40 + let imageSrc_pub = "pub_icon.png";
30 - let imageSrc_pub = "https://cdn.icon-icons.com/icons2/882/PNG/512/1-71_icon-icons.com_68803.png";
31 41
32 const CreateMarkerImage = (type) => { 42 const CreateMarkerImage = (type) => {
33 - if(type === '술집' || type === '호프') return new kakao.maps.MarkerImage(imageSrc_pub, imageSize); 43 + if (type === "술집" || type === "호프")
34 - else if(type === '카페' || type === '디저트') return new kakao.maps.MarkerImage(imageSrc_cafe, imageSize); 44 + return new kakao.maps.MarkerImage(imageSrc_pub, imageSize);
45 + else if (type === "카페" || type === "디저트")
46 + return new kakao.maps.MarkerImage(imageSrc_cafe, imageSize);
35 else return new kakao.maps.MarkerImage(imageSrc_meal, imageSize); 47 else return new kakao.maps.MarkerImage(imageSrc_meal, imageSize);
36 - } 48 + };
37 49
38 - for(let i=0; i<props.datas.length; i++) { 50 + for (let i = 0; i < FDatas.length; i++) {
39 - const temp = props.datas[i]; 51 + const temp = FDatas[i];
40 positions.push({ 52 positions.push({
41 title: temp.name, 53 title: temp.name,
42 latlng: new kakao.maps.LatLng(temp.latitude, temp.longitude), 54 latlng: new kakao.maps.LatLng(temp.latitude, temp.longitude),
43 - image : CreateMarkerImage(temp.type) 55 + image: CreateMarkerImage(temp.type),
44 }); 56 });
45 } 57 }
46 58
47 - 59 + for (let i = 0; i < positions.length; i++) {
48 - for (let i = 0; i < positions.length; i ++) {
49 -
50 -
51 -
52 -
53 -
54 // 마커를 생성합니다 60 // 마커를 생성합니다
55 let marker = new kakao.maps.Marker({ 61 let marker = new kakao.maps.Marker({
56 map: map, // 마커를 표시할 지도 62 map: map, // 마커를 표시할 지도
57 position: positions[i].latlng, // 마커를 표시할 위치 63 position: positions[i].latlng, // 마커를 표시할 위치
58 - title : positions[i].title, // 마커의 타이틀, 마커에 마우스를 올리면 타이틀이 표시됩니다 64 + image: positions[i].image, // 마커 이미지
59 - image : positions[i].image // 마커 이미지 65 + });
66 + marker.setMap(map);
67 + const name = positions[i].title
68 + // 마커를 클릭했을 때 마커 위에 표시할 인포윈도우를 생성합니다
69 + let iwContent = `<div style="padding:5px;">${name}</div>`, // 인포윈도우에 표출될 내용으로 HTML 문자열이나 document element가 가능합니다
70 + iwRemoveable = true; // removeable 속성을 ture 로 설정하면 인포윈도우를 닫을 수 있는 x버튼이 표시됩니다
71 +
72 + // 인포윈도우를 생성합니다
73 + let infowindow = new kakao.maps.InfoWindow({
74 + content : iwContent,
75 + removable : iwRemoveable
76 + });
77 +
78 + // 마커에 클릭이벤트를 등록합니다
79 + kakao.maps.event.addListener(marker, 'click', function() {
80 + // 마커 위에 인포윈도우를 표시합니다
81 + infowindow.open(map, marker);
60 }); 82 });
61 } 83 }
62 }); 84 });
85 + };
86 + }, [FDatas]);
63 87
64 88
65 - }; 89 + useEffect(()=> {
66 - }); 90 + var result = [];
91 + if(selectedOption === 'mealRadio') {
92 + for(let i=0; i<props.datas.length; i++) {
93 + const temp = props.datas[i];
94 + if(temp.type !== '카페' && temp.type !== '디저트' && temp.type !== '술집' && temp.type !== '호프') {
95 + result.push(temp);
96 + }
97 + }
98 + } else if(selectedOption === 'cafeRadio') {
99 + for(let i=0; i<props.datas.length; i++) {
100 + const temp = props.datas[i];
101 + if(temp.type === '카페' || temp.type === '디저트') {
102 + result.push(temp);
103 + }
104 + }
105 + } else if(selectedOption === 'pubRadio') {
106 + for(let i=0; i<props.datas.length; i++) {
107 + const temp = props.datas[i];
108 + if(temp.type === '술집' || temp.type === '호프') {
109 + result.push(temp);
110 + }
111 + }
112 + }
113 + setFDatas(result);
114 + }, [selectedOption]);
67 115
68 116
117 +
118 + const handleOptionChange = (e) => {
119 + console.log(e.target.value);
120 + setselectedOption(e.target.value);
121 + }
122 +
69 return ( 123 return (
70 <> 124 <>
71 - <h1 className="text-center"> 125 +
126 + <Row>
127 + <Col>
72 <span className="font-weight-bold">MEALKHU MAP</span> 128 <span className="font-weight-bold">MEALKHU MAP</span>
73 - </h1> 129 + </Col>
74 - <div id='map' style={{ 130 + <Col>
75 - 'width':'100%', 131 + <Row>
76 - 'height':'30rem' 132 + <Col>
77 - }}></div> 133 + <FormGroup >
134 + <Label className="float-right" >
135 + <Input
136 + id="init"
137 + checked={selectedOption === 'mealRadio'}
138 + value="mealRadio"
139 + onChange={handleOptionChange}
140 + type="radio" name="radio1" />식사
141 + </Label>
142 + </FormGroup>
143 + </Col>
144 + <Col>
145 + <FormGroup >
146 + <Label className="float-right">
147 + <Input
148 + value="cafeRadio"
149 + checked={selectedOption === 'cafeRadio'}
150 + onChange={handleOptionChange}
151 + type="radio" name="radio1" />카페
152 + </Label>
153 + </FormGroup>
154 + </Col>
155 + <Col>
156 + <FormGroup >
157 + <Label className="float-right">
158 + <Input
159 + value = "pubRadio"
160 + checked={selectedOption === 'pubRadio'}
161 + onChange={handleOptionChange}
162 + type="radio" name="radio1" />술집
163 + </Label>
164 + </FormGroup>
165 + </Col>
166 + </Row>
167 + </Col>
168 + </Row>
169 +
170 +
171 +
172 + <div
173 + id="map"
174 + style={{
175 + width: "100%",
176 + height: "27rem",
177 + }}
178 + ></div>
179 + <p>※같은 건물에 위치한 식당의 경우, 좌표가 겹쳐서 보이지 않는 경우가 있습니다. 식당들의 자세한 정보는 menu에서 확인해주세요.</p>
78 </> 180 </>
79 - ) 181 +
80 -} 182 +
183 + );
184 +};
81 185
82 export default LandingMap; 186 export default LandingMap;
......
...@@ -161,14 +161,6 @@ const MenuPage = (props) => { ...@@ -161,14 +161,6 @@ const MenuPage = (props) => {
161 161
162 162
163 <Container> 163 <Container>
164 - {/* ???????? ???? */}
165 - {/* <FormGroup>
166 - <Label for="exampleCheckbox">??</Label>
167 - <div>
168 - <CustomInput type="checkbox" id="exampleCustomInline" label="??" inline />
169 -
170 - </div>
171 - </FormGroup> */}
172 </Container> 164 </Container>
173 {isLoading ? 165 {isLoading ?
174 (<Container style={{'paddingTop':'1.2rem'}}> 166 (<Container style={{'paddingTop':'1.2rem'}}>
......