정성훈 / 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 179 additions and 83 deletions
......@@ -34,7 +34,7 @@ height: 100%;
</style>
<style>
body::-webkit-scrollbar {
width: 10px;
width: 8px;
background: transparent;
}
body::-webkit-scrollbar-thumb {
......
/*global kakao*/
import React, { useEffect, useState } from 'react'
import appKey from '../config/appKey.json';
import React, { useEffect, useState } from "react";
import { Input, Button, ButtonGroup } from "reactstrap";
import { Label, CustomInput, Row, Col, FormGroup } from "reactstrap";
import appKey from "../config/appKey.json";
const LandingMap = (props) => {
useEffect(()=>{
const script = document.createElement("script");
script.async = true;
script.src =
`https://dapi.kakao.com/v2/maps/sdk.js?appkey=${appKey.value}&autoload=false`;
document.head.appendChild(script);
script.onload = () => {
kakao.maps.load(() => {
let container = document.getElementById("map");
let options = {
center: new kakao.maps.LatLng(37.2464876, 127.0768072),
level: 3
};
let map = new window.kakao.maps.Map(container, options);
let positions = [];
// 마커 이미지를 생성합니다
// 마커 이미지의 이미지 크기 입니다
let imageSize = new kakao.maps.Size(40, 40);
// let imageSrc = "https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png";
let imageSrc_cafe = "https://cdn.icon-icons.com/icons2/882/PNG/512/1-68_icon-icons.com_68826.png";
let imageSrc_meal = "https://cdn.icon-icons.com/icons2/882/PNG/512/1-63_icon-icons.com_68800.png";
let imageSrc_pub = "https://cdn.icon-icons.com/icons2/882/PNG/512/1-71_icon-icons.com_68803.png";
const CreateMarkerImage = (type) => {
if(type === '술집' || type === '호프') return new kakao.maps.MarkerImage(imageSrc_pub, imageSize);
else if(type === '카페' || type === '디저트') return new kakao.maps.MarkerImage(imageSrc_cafe, imageSize);
else return new kakao.maps.MarkerImage(imageSrc_meal, imageSize);
}
for(let i=0; i<props.datas.length; i++) {
const temp = props.datas[i];
positions.push({
title: temp.name,
latlng: new kakao.maps.LatLng(temp.latitude, temp.longitude),
image : CreateMarkerImage(temp.type)
});
}
const [FDatas, setFDatas] = useState([]);
const [selectedOption, setselectedOption] = useState('');
window.onload = function() {
let init = document.getElementById('init');
init.click();
}
for (let i = 0; i < positions.length; i ++) {
// 마커를 생성합니다
let marker = new kakao.maps.Marker({
map: map, // 마커를 표시할 지도
position: positions[i].latlng, // 마커를 표시할 위치
title : positions[i].title, // 마커의 타이틀, 마커에 마우스를 올리면 타이틀이 표시됩니다
image : positions[i].image // 마커 이미지
});
}
});
};
});
useEffect(() => {
const script = document.createElement("script");
script.async = true;
script.src = `https://dapi.kakao.com/v2/maps/sdk.js?appkey=${appKey.value}&autoload=false`;
document.head.appendChild(script);
script.onload = () => {
console.log(FDatas);
kakao.maps.load(() => {
let container = document.getElementById("map");
let options = {
center: new kakao.maps.LatLng(37.2479109441, 127.0773045246),
level: 3,
};
let map = new window.kakao.maps.Map(container, options);
let positions = [];
// 마커 이미지를 생성합니다
// 마커 이미지의 이미지 크기 입니다
let imageSize = new kakao.maps.Size(40, 40);
let imageSrc_cafe = "cafe_icon.png";
let imageSrc_meal = "meal_icon.png";
let imageSrc_pub = "pub_icon.png";
const CreateMarkerImage = (type) => {
if (type === "술집" || type === "호프")
return new kakao.maps.MarkerImage(imageSrc_pub, imageSize);
else if (type === "카페" || type === "디저트")
return new kakao.maps.MarkerImage(imageSrc_cafe, imageSize);
else return new kakao.maps.MarkerImage(imageSrc_meal, imageSize);
};
for (let i = 0; i < FDatas.length; i++) {
const temp = FDatas[i];
positions.push({
title: temp.name,
latlng: new kakao.maps.LatLng(temp.latitude, temp.longitude),
image: CreateMarkerImage(temp.type),
});
}
for (let i = 0; i < positions.length; i++) {
// 마커를 생성합니다
let marker = new kakao.maps.Marker({
map: map, // 마커를 표시할 지도
position: positions[i].latlng, // 마커를 표시할 위치
image: positions[i].image, // 마커 이미지
});
marker.setMap(map);
const name = positions[i].title
// 마커를 클릭했을 때 마커 위에 표시할 인포윈도우를 생성합니다
let iwContent = `<div style="padding:5px;">${name}</div>`, // 인포윈도우에 표출될 내용으로 HTML 문자열이나 document element가 가능합니다
iwRemoveable = true; // removeable 속성을 ture 로 설정하면 인포윈도우를 닫을 수 있는 x버튼이 표시됩니다
// 인포윈도우를 생성합니다
let infowindow = new kakao.maps.InfoWindow({
content : iwContent,
removable : iwRemoveable
});
// 마커에 클릭이벤트를 등록합니다
kakao.maps.event.addListener(marker, 'click', function() {
// 마커 위에 인포윈도우를 표시합니다
infowindow.open(map, marker);
});
}
});
};
}, [FDatas]);
return (
<>
<h1 className="text-center">
<span className="font-weight-bold">MEALKHU MAP</span>
</h1>
<div id='map' style={{
'width':'100%',
'height':'30rem'
}}></div>
</>
)
}
export default LandingMap;
\ No newline at end of file
useEffect(()=> {
var result = [];
if(selectedOption === 'mealRadio') {
for(let i=0; i<props.datas.length; i++) {
const temp = props.datas[i];
if(temp.type !== '카페' && temp.type !== '디저트' && temp.type !== '술집' && temp.type !== '호프') {
result.push(temp);
}
}
} else if(selectedOption === 'cafeRadio') {
for(let i=0; i<props.datas.length; i++) {
const temp = props.datas[i];
if(temp.type === '카페' || temp.type === '디저트') {
result.push(temp);
}
}
} else if(selectedOption === 'pubRadio') {
for(let i=0; i<props.datas.length; i++) {
const temp = props.datas[i];
if(temp.type === '술집' || temp.type === '호프') {
result.push(temp);
}
}
}
setFDatas(result);
}, [selectedOption]);
const handleOptionChange = (e) => {
console.log(e.target.value);
setselectedOption(e.target.value);
}
return (
<>
<Row>
<Col>
<span className="font-weight-bold">MEALKHU MAP</span>
</Col>
<Col>
<Row>
<Col>
<FormGroup >
<Label className="float-right" >
<Input
id="init"
checked={selectedOption === 'mealRadio'}
value="mealRadio"
onChange={handleOptionChange}
type="radio" name="radio1" />식사
</Label>
</FormGroup>
</Col>
<Col>
<FormGroup >
<Label className="float-right">
<Input
value="cafeRadio"
checked={selectedOption === 'cafeRadio'}
onChange={handleOptionChange}
type="radio" name="radio1" />카페
</Label>
</FormGroup>
</Col>
<Col>
<FormGroup >
<Label className="float-right">
<Input
value = "pubRadio"
checked={selectedOption === 'pubRadio'}
onChange={handleOptionChange}
type="radio" name="radio1" />술집
</Label>
</FormGroup>
</Col>
</Row>
</Col>
</Row>
<div
id="map"
style={{
width: "100%",
height: "27rem",
}}
></div>
<p>※같은 건물에 위치한 식당의 경우, 좌표가 겹쳐서 보이지 않는 경우가 있습니다. 식당들의 자세한 정보는 menu에서 확인해주세요.</p>
</>
);
};
export default LandingMap;
......
......@@ -161,14 +161,6 @@ const MenuPage = (props) => {
<Container>
{/* ???????? ???? */}
{/* <FormGroup>
<Label for="exampleCheckbox">??</Label>
<div>
<CustomInput type="checkbox" id="exampleCustomInline" label="??" inline />
</div>
</FormGroup> */}
</Container>
{isLoading ?
(<Container style={{'paddingTop':'1.2rem'}}>
......