[FAQ] 지도/로컬 API 문의 전 꼭 읽어 주세요.
https://react-kakao-maps-sdk.jaeseokim.dev/docs/sample/overlay/removableCustomOverlay
여기에 CustomOverlayMap을 사용하라고 되어있는데 실제 마크를 클릭하면 흰색 네모박스가 뜨는데 그걸 크기 조절할 수도 없고, 삭제할수도없는데 어떻게 조치할까요
저희가 공식으로 제공하는 라이브러리가 아니기 때문에 자세한 답변 어려운 점 양해 부탁드립니다.
react에서 지도 JS SDK를 사용할 경우 아래 코드와 링크 참고해서 커스텀 오버레이를 표시해주세요.
그리고 여러개 커스터 오버레이를 올릴 경우 content는 문자열이 아닌
document.createElement로 요소를 생성해서 직접 이벤트를 등록해야 합니다.
여러개 커스텀 오버레이를 올릴 경우: 안녕하세요 다중마커로 닫기가 가능한 커스텀 오버레이를 구현하려고 하는데 가이드 부탁드립니다 - lea.ju 님의 게시물 #4
CustomOverlay 문서: 닫기가 가능한 커스텀 오버레이 - Kakao 지도 Web API
KakaoMap.js
/*global kakao*/
import React, { useEffect, useState, useRef } from 'react';
function KakaoMap () {
const [, setKakaoMap] = useState(null);
const container = useRef();
useEffect(() => {
const script = document.createElement("script");
script.src = "https://dapi.kakao.com/v2/maps/sdk.js?appkey=JS_APP_KEY&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: 9
};
const map = new kakao.maps.Map(container.current, options);
setKakaoMap(map);
// TODO: 커스텀 오버레이 생성
});
};
}, [container]);
return (
<div id="map" ref={container} style={{
width: '500px',
height: '500px'
}}></div>
)
}
export default KakaoMap;
App.js
import KakaoMap from './KakaoMap';
function App() {
return (
<div className="App">
<KakaoMap/>
</div>
);
}
export default App;