1. [TypeScript] 클릭한 장소를 가운데에 고정시키기

해야 할 일
: 지도의 중심을 기종/화면 크기 상관없이 중간으로 픽스해야 한다.

아이폰 se	갤럭시 폴드

보는 것처럼 무조건 화면 중간에 와야하는 지도인만큼,, 기종이나 화면 크기에 상관없이 클릭한 장소를 항상 화면 중간에 오게끔 했어야 했다.

해결 방법

1. yAnchor 값을 1.3 정도로 수정해서 오버레이를 클릭한 지점 위에 표시

const newCustomOverlay = new window.kakao.maps.CustomOverlay({
    position: new window.kakao.maps.LatLng(0, 0),
    content: '',
    yAnchor: 1.3,
    map: null,
});

2. setCenter() 메서드 -> panTo() 메서드 교체

• 부드럽게 이동효과 추가
• 부드럽게만.. 이동한다....... 얜 그냥.. 선호도 차이

둘 다 근본적으로 해결은 힘들었다.

그래서 지도 이동 시 클릭한 위치와 지도의 크기, 그리고 오버레이의 크기를 고려해 화면을 정확히 중간에 맞출 수 있는 방식으로 설정해야 했다.

?? 오버레이가 왜 필요하신가요?
왜냐면 저희 기능은 위치 추가 시 코스가 실시간 등록이 된답니다..

오버레이가 없으면 yAnchor만 건드려도 1번 선에서 해결 됩니다!!

하지만 우리는 오버레이가 있었기 때문에,,ㅠㅠ

지도의 중심을 오프셋하는 방법을 사용해야 했다.
panBy() 메서드를 사용하기로 했다.

panBy(x, y) 메서드는 현재 지도의 중심을 지정된 x, y 픽셀만큼 이동시키는 메서드이다.

// 클릭한 위치를 화면 중간에 오도록 조정 (오프셋)
setTimeout(() => {
    const mapHeight = map.getNode().offsetHeight;
    map.panBy(0, (mapHeight / 5));
}, 0);

화면의 1/4, 1/3, 1/2, 1/10 다 해봤는데 5가 제일 적당한 것 같다.. 이유는 알 수 없지만 ...ㅠㅠ 저게 최선인 것 같다.

뭔가 움직이면서 부드럽게 이동한다고 하는데, 사실 거슬려서 panBy 대신 방법이 없을까 고민해볼 것 같다..

해결..
터무니 없게 쉬운 방식으로 ㅋㅋㅋㅋ ㅜ
지도의 세로를 100vh -> 70vh로 변경 후 setCenter로 일괄 처리했는데 너무 간단하게(?) 해결...