지도/로컬 API에 대한 문의게시판입니다.
안녕하세요. 카카오지도 api 지도 샘플을 통해 제작을 하다가 문제가 생겨서 문의 드립니다.ㅠ (https://codesandbox.io/s/gifted-wescoff-77nwu?file=/src/App.js)-여기 링크를 참고 했습니다.
다름이 아니라 저는 지도를 클릭시 지도의 위도 좌표가 나오는데 그걸 다른 파일에서 사용을 하고 싶은데 잘 안됩니다… getLng()와 getLat()를 저장해서 사용도 해봤는데 계속 에러가 나가지고 문의 드립니다. exports와 module.expotrs를 사용해봤는데 계속 변수가 defined되어 있다고 나오고… 그럽니다… 위도 경도 변수들을 다른 파일에서 사용하고 싶습니다… 도와주세요…!
밑에는 KakaoMap.jsx파일이고
/* global kakao */
import { makeStyles } from ‘@material-ui/core/styles’;
import { CompareArrowsOutlined } from ‘@material-ui/icons’;
import React, { useEffect, useState, useRef } from “react”;
function getModalStyle() {
const top = 50;
const left = 50;
return {
top: ${top}%,
left: ${left}%,
transform: translate(-${top}%, -${left}%),
};
}
const useStyles = makeStyles((theme) => ({
root: {
flexGrow: 1,
},
paper: {
padding: theme.spacing(2),
position: ‘absolute’,
backgroundColor: theme.palette.background.paper,
border: ‘2px solid #000’,
boxShadow: theme.shadows[5],
padding: theme.spacing(2, 4, 3),
},
margin: {
margin: theme.spacing(1),
fullWidth: true,
},
}));
export default function KakaoMap(props) {
const { markerPositions, size } = props;
const [kakaoMap, setKakaoMap] = useState(null);
const [, setMarkers] = useState([]);
const container = useRef();
useEffect(() => {
const script = document.createElement(“script”);
script.src =
“https://dapi.kakao.com/v2/maps/sdk.js?appkey=*&autoload=false”;
document.head.appendChild(script);
script.onload = () => {
kakao.maps.load(() => {
const center = new kakao.maps.LatLng(37.50802, 127.062835);
const options = {
center,
level: 3
};
const map = new kakao.maps.Map(container.current, options);
//setMapCenter(center);
var marker = new kakao.maps.Marker({
map: map,
position: new kakao.maps.LatLng(33.450701, 126.570667)
});
kakao.maps.event.addListener(map, 'click', function(mouseEvent) {
var latlng = mouseEvent.latLng;
var message = '클릭한 위치의 위도는 ' + latlng.getLat() + ' 이고, ';
message += '경도는 ' + latlng.getLng() + ' 입니다';
alert(message);
});
setKakaoMap(map);
});
};
}, [container]);
useEffect(() => {
if (kakaoMap === null) {
return;
}
// save center position
const center = kakaoMap.getCenter();
// change viewport size
const [width, height] = size;
container.current.style.width = `${width}px`;
container.current.style.height = `${height}px`;
// relayout and...
kakaoMap.relayout();
// restore
kakaoMap.setCenter(center);
}, [kakaoMap, size]);
useEffect(() => {
if (kakaoMap === null) {
return;
}
const positions = markerPositions.map(pos => new kakao.maps.LatLng(...pos));
setMarkers(markers => {
// clear prev markers
markers.forEach(marker => marker.setMap(null));
// assign new markers
return positions.map(
position => new kakao.maps.Marker({ map: kakaoMap, position })
);
});
if (positions.length > 0) {
const bounds = positions.reduce(
(bounds, latlng) => bounds.extend(latlng),
new kakao.maps.LatLngBounds()
);
kakaoMap.setBounds(bounds);
}
}, [kakaoMap, markerPositions]);
return
}
변수를 쓰고 싶은 파일은 UserMain.jsx파일입니다.
import React, { useState } from ‘react’;
import { makeStyles } from ‘@material-ui/core/styles’;
import {Paper,Grid} from ‘@material-ui/core’;
import moment from ‘moment’;
import ‘moment/locale/ko’;
import UserMainRate from ‘…/contents/UserMainRate’;
import UserMainTable from ‘…/contents/UserMainTable’;
const useStyles = makeStyles((theme) => ({
root: {
flexGrow: 1,
},
paper: {
padding: theme.spacing(1),
textAlign: ‘center’,
color: theme.palette.text.secondary,
},
datePaper:{
padding: theme.spacing(1),
textAlign: ‘center’,
fontSize: ‘25px’,
background: “#9fd8ac”,
},
thirdPaper:{
minHeight:420,
padding: theme.spacing(1),
}
}));
export default function UserMain() {
const classes = useStyles();
const today = moment().locale(‘ko’).format(“YYYY년MM월DD일 ddd요일”);
const startDate = moment().locale(‘ko’).day(1).format(“YYYY년MM월DD일 ddd요일”);
const endDate = moment().locale(‘ko’).day(5).format(“YYYY년MM월DD일 ddd요일”);
return (
<div className={classes.root}>
<Grid container spacing={2}>
<Grid item xs={12}>
<Paper className={classes.datePaper}>
오늘 날짜 : {today}
달성 기간 : {startDate} ~ {endDate}
</Paper>
</Grid>
<Grid item xs={12}>
<Paper className={classes.paper}><UserMainRate/></Paper>
</Grid>
<Grid item xs={12}>
<Paper className={classes.paper,classes.thirdPaper}><UserMainTable/></Paper>
</Grid>
</Grid>
</div>
);
}