카카오맵 커스텀 오버레이 줌 바꿀 때 위치 바뀌는 현상

안녕하세요! 바로 본론으로 넘어가자면 처음에는 다음 사진과 같이 정상적으로 잘 뜨는 모습입니다만

스크린샷 2021-11-16 오후 6.47.47

다른 곳을 줌했다가 다시 저 화면으로 돌아가면 다음 사진과 같이 커스텀 오버레이의 위치가 바뀌는 현상이 일어납니다.

스크린샷 2021-11-16 오후 6.48.01

해결하려 시도했던 것들 :

  1. xAnchor와 yAnchor를 각각 0 혹은 기본값인 0.5로 주거나 아예 두 값을 빼보았지만 위치가 바뀌는 현상은 여전했습니다.

  2. 커스텀 오버레이에 css 를 준 것이 문제인건가 싶어 css를 모두 빼봤지만 위치가 바뀌는 현상은 여전했습니다.

다음은 제가 사용한 소스코드입니다. 답변 주시면 감사하겠습니다!

스크린샷 2021-11-16 오후 6.52.31

아래는 기존 예제의 원, 마커, 커스텀 오버레이를 생성한 코드로
레벨 변경을 해도 커스텀 오버레이 위치가 이동되지 않았습니다.

먼저 커스텀 오버레이 content에 설정된 HTML 문자열과 스타일도 확인이 필요해보여요.
기본 문자열로 생성해서 다시 한번 확인 부탁드립니다.
그리고 현상을 확인할 수 있는 HTML 문자열도 함께 첨부해주세요.

var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
    center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
    level: 4 // 지도의 확대 레벨
};

var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다

var circle = new kakao.maps.Circle({
    map: map,
    center : new kakao.maps.LatLng(33.45063768751758, 126.57067227820814),  // 원의 중심좌표 입니다
    radius: 135.00000000052157, // 미터 단위의 원의 반지름입니다
    strokeWeight: 2, // 선의 두께입니다
    strokeColor: '#75B8FA', // 선의 색깔입니다
    strokeOpacity: 0.8, // 선의 불투명도 입니다 1에서 0 사이의 값이며 0에 가까울수록 투명합니다
    strokeStyle: 'solid', // 선의 스타일 입니다
    fillColor: '#CFE7FF', // 채우기 색깔입니다
    fillOpacity: 0.4  // 채우기 불투명도 입니다
});


var imageSrc = 'https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/marker_red.png', // 마커이미지의 주소입니다
imageSize = new kakao.maps.Size(64, 69), // 마커이미지의 크기입니다
imageOption = {offset: new kakao.maps.Point(27, 69)}; // 마커이미지의 옵션입니다. 마커의 좌표와 일치시킬 이미지 안에서의 좌표를 설정합니다.

// 마커의 이미지정보를 가지고 있는 마커이미지를 생성합니다
var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize, imageOption),
markerPosition = new kakao.maps.LatLng(37.54699, 127.09598); // 마커가 표시될 위치입니다

var marker = new kakao.maps.Marker({
    map: map,
    position: new kakao.maps.LatLng(33.45069174545018, 126.57066125640884),
    image: markerImage // 마커이미지 설정
});


var customOverlay = new kakao.maps.CustomOverlay({
    map: map,
    position: marker.getPosition(),
    content: '<div style="padding-top:30px"><div>연산공원</div> <div>출근가능거리: 100m</div></div>',
    xAnchor: 0.5,
    yAnchor: 0.5
});

해당 content 부분은 리액트 컴포넌트를 넘겨주었고 renderToString 메소드를 이용해 문자열로 변환했습니다.

스크린샷 2021-11-17 오전 10.45.44

혹시 이렇게 하는 방식이 옳은 방식이 아닌지, content의 값은 방금 올려주신 것처럼 꼭 약간 날것의 (?) HTML 문자열로 해야하는건지 궁금합니다.

답변주신것과 같이 HTML을 문자열 형태로 전달하니 줌에 따라 위치가 달라지는 이슈는 사라졌습니다.

스크린샷 2021-11-17 오전 11.15.45

하지만 onclick 이벤트를 주면 그에 해당하는 함수를 할당해줘도 그 함수가 정의되지 않았다는 오류를 내는데 이 이슈의 해결법이 뭔지 궁금합니다.

스크린샷 2021-11-17 오전 11.16.10

커스텀 오버레이의 content는 HTML문자열과 HTMLElement만 설정할 수 있습니다.
이전 방식은 content를 컴포넌트 객체로 설정했기 때문에
API에서 처리할 수 있는 값이 아니므로 부작용이 일어납니다.

아래와 같이 HTMLElement로 content를 구성한 다음
생성한 객체에 직접 이벤트를 등록해주세요.

// content HTMLElement 생성
let content = document.createElement('div');
content.style.paddingTop = '30px';

let title = document.createElement('div');
title.appendChild(document.createTextNode('연산공원'));
title.onclick = () => {
    console.log('im clicked');
}

let distance = document.createElement('div');
distance.appendChild(document.createTextNode('출근가능거리: 100m'));

content.appendChild(title);
content.appendChild(distance);

let customOverlay = new kakao.maps.CustomOverlay({
    map: map,
    position: marker.getPosition(),
    content: content,
    xAnchor: 0.5,
    yAnchor: 0.5
});

선생님의 자세한 답변 진심으로 감사합니다. 앞으로의 프로젝트도 HTML 노드를 직접 수정하는 방식으로 진행하도록 하겠습니다. 하지만 이제는 온클릭 이슈는 해결했는데 다른 곳을 줌했다가 다시 돌아오면 똑같이 위치가 바뀌게 되는 현상이 일어나게 됩니다… 한 번 확인 부탁드리겠습니다 :pray:

스크린샷 2021-11-17 오후 12.25.26
스크린샷 2021-11-17 오후 12.25.38
아래는 제가 적용한 소스코드입니다.
스크린샷 2021-11-17 오후 12.28.33

아, 생각해보니 제가 레벨에 따라서 특정 엘리먼트를 display none 으로 해주었다가 display block 혹은 inline-block으로 설정해주었는데요. 혹시나 해서 이 코드를 빼보니 위치가 바뀌는 현상이 나타나지 않았습니다. 이것과 관련해서 제 스스로 만져봐야겠군요… 이 문제는 제가 해결하겠습니다!! 지금까지 친절한 답변에 감사드립니다.

좋아요 1