sidebar에서 랜더링된 데이터리스트중에 하나를 클릭하면 해당 마커로 확대되어야한다.
그러기 위해서는
const [area, setArea] = useRecoilState(CityArea);
recoil로 전역 state값 하나 만든 후
const onClickHandler = (mapx: number, mapy: number, areacode: string) => {
setArea({ mapx, mapy, level: 9, areacode });
//모달생성
};
이벤트핸들러 함수를 만들고 받아온 인자값을 전역에 넣어준다.
그 후에 지도페이지로 이동후 디펜던시에 전역상태값을 넣은 후에 kakaoapi에서 제공해주는 명령어를 사용한다.
const [area, setArea] = useRecoilState(CityArea);
useEffect(() => {
kakao.maps.load(() => {
const position = new kakao.maps.LatLng(area.mapy, area.mapx);
let el = document.getElementById('map');
const mapOptions = {
center: position, // 지도의 중심좌표
level: area.level, // 지도의 확대 레벨
};
const map = new kakao.maps.Map(el, mapOptions);
// 지도 확대 축소를 제어할 수 있는 줌 컨트롤을 생성합니다
let zoomControl = new kakao.maps.ZoomControl();
map.addControl(zoomControl, kakao.maps.ControlPosition.RIGHT);
// 마커 이미지의 이미지 주소
let imageSrc = require('@/assets/marker.png').default;
// 마커 이미지의 이미지 크기
let imageSize = new kakao.maps.Size(60, 60);
for (let i = 0; i < cityInfo.length; i++) {
// 마커 이미지를 생성합니다
let markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize);
const content = `
<div class="customoverlay" style="background-color :#fff; width: auto; height: auto; padding: 2px; border-radius: 5px; border: 1px solid #1753a5;">
<div style="color: #1753a5; font-weight: 700; font-size: 13px;">${cityInfo[i].korarea}</div>
</div>`;
// const content = `
// <Style.Wrap class="customoverlay">
// <span>
// ${cityInfo[i].korarea}
// </span>
// </Style.Wrap>`;
// 마커를 생성합니다
let marker = new kakao.maps.Marker({
map, // 마커를 표시할 지도
position: new kakao.maps.LatLng(cityInfo[i].mapy, cityInfo[i].mapx), // 마커를 표시할 위치
title: cityInfo[i].korarea, // 마커의 타이틀, 마커에 마우스를 올리면 타이틀이 표시됩니다
image: markerImage, // 마커 이미지
});
// 커스텀 오버레이 생성
new kakao.maps.CustomOverlay({
map,
position: new kakao.maps.LatLng(cityInfo[i].mapy, cityInfo[i].mapx),
content,
title: cityInfo[i].korarea,
image: markerImage,
});
marker.setMap(map);
// let isClicked = true;
kakao.maps.event.addListener(marker, 'click', () => {
// console.log(cityInfo[i].korarea);
//모달 생성
});
}
});
}, [area]);