import React, { useEffect } from 'react';
declare global {
interface Window {
kakao: any;
}
const kakao: any;
}
export default function KakaoMap() {
useEffect(() => {
const kakaoMapScript = document.createElement('script');
kakaoMapScript.async = false;
kakaoMapScript.src = `//dapi.kakao.com/v2/maps/sdk.js?appkey=${process.env.NEXT_PUBLIC_MAP_KEY}&autoload=false`;
document.head.appendChild(kakaoMapScript);
const onLoadKakaoAPI = () => {
const container = document.getElementById('map');
window.kakao.maps.load(() => {
const options = {
center: new window.kakao.maps.LatLng(37.54699, 127.09598),
level: 3,
};
const map = new window.kakao.maps.Map(container, options); // 지도를 생성합니다
const imageSrc =
'https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/marker_red.png'; // 마커이미지의 주소입니다
const imageSize = new window.kakao.maps.Size(64, 69); // 마커이미지의 크기입니다
const imageOption = { offset: new window.kakao.maps.Point(27, 69) }; // 마커이미지의 옵션입니다. 마커의 좌표와 일치시킬 이미지 안에서의 좌표를 설정합니다.
// 마커의 이미지정보를 가지고 있는 마커이미지를 생성합니다
const markerImage = new window.kakao.maps.MarkerImage(
imageSrc,
imageSize,
imageOption,
);
const markerPosition = new window.kakao.maps.LatLng(
37.54699,
127.09598,
); // 마커가 표시될 위치입니다
// 마커를 생성합니다
const marker = new window.kakao.maps.Marker({
position: markerPosition,
image: markerImage, // 마커이미지 설정
});
map.relayout();
map.setCenter(new window.kakao.maps.LatLng(37.54699, 127.09598));
marker.setMap(map);
});
};
kakaoMapScript.addEventListener('load', onLoadKakaoAPI);
}, []);
return <div id="map" className="map-area" />;
}
이렇게 코드가 작성되어있고 사진과 같이 드래그로 이동 시 새로 렌더링 되지 못 하고 있습니다…
map.relayout();
map.setCenter(); 모두 사용하여도 이상이 생깁니다..
정말 감이 잡히지 않습니다…혹시 컴포넌트 렌더링 순서에 문제가 있을까요…?어떤 방법으로 해결하면 좋을 지 조언부탁드립니다.
