정성훈 / MEALKHU

Go to a project
Toggle navigation Toggle navigation pinning
swa07016
edb19f49 1 parent 716f4d1e

LandingMap 컴포넌트 구현

Inline Side-by-side
Showing 3 changed files with 105 additions and 13 deletions
......@@ -32,6 +32,22 @@ height: 100%;
<style>
#root, .modalClass{font-family: 'Do Hyeon', sans-serif;}
</style>
<style>
body::-webkit-scrollbar {
width: 10px;
background: transparent;
}
body::-webkit-scrollbar-thumb {
background-color: #940f0f;
border-radius: 10px;
}
html,
body {
/* width:100vw; or % */
/* height:100vh; or % */
overflow-x: hidden;
}
</style>
</head>
<body class="pt-5" style="width : 100%; height:100%; margin: 0;">
<noscript>You need to enable JavaScript to run this app.</noscript>
......
/*global kakao*/
import React, { useEffect, useState } from 'react'
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)
});
}
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 // 마커 이미지
});
}
});
};
});
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
import React, { useState, useEffect } from 'react';
import NavBar from '../components/NavBar';
import MealCard from '../components/MealCard';
import LandingMap from '../components/LandingMap';
import { CustomInput } from 'reactstrap';
import { Container, Row, Col } from "reactstrap";
import axios from 'axios';
import Loading from '../components/Loading';
const LandingPage = (props) => {
const [datas, setDatas] = useState([]);
......@@ -21,6 +21,7 @@ const LandingPage = (props) => {
const [cafe, setCafe] = useState(false);
const [etc, setEtc] = useState(false);
useEffect(() => {
const fetchData = async () => {
const result = await axios(
......@@ -152,21 +153,14 @@ const LandingPage = (props) => {
onChange={()=>setEtc(!etc)}
/>
</Col>
</Row>
{datas ? <LandingMap
datas = {datas}
/> : 'loading...'}
</Container>
<Container>
{/* ???????? ???? */}
{/* <FormGroup>
<Label for="exampleCheckbox">??</Label>
<div>
<CustomInput type="checkbox" id="exampleCustomInline" label="??" inline />
</div>
</FormGroup> */}
</Container>
......