[카카오 지도 API] 마커 인덱스가 index+1 값으로 표시되는 문제

문제 상황

• 이전 글에서 이어지는 문제 상황
  • 2024.09.13 - [🔫 트러블슈팅] - [카카오 지도 API] 검색 결과 목록의 페이지별 마커 인덱스 겹침 문제
• 첫 번째 선택인데 마커 인덱스가 2로 표시되는 문제가 발생했다. 즉, 배열의 길이 +1 값으로 표시됐다.
• 배열의 길이를 콘솔에 찍어서 확인했지만 배열의 길이엔 문제가 없었다. 

 

해결 방법

addSelectedMarker().. 너가 문제인거니

배열의 길이에는 문제가 없었으니 문제는 addSelectedMarker 함수 내에 있을 것이라 생각하고 살펴봤다.

1. handleSelectBtnClick 함수 내에서는 addSelectedMarker 함수를 호출한다.
2. addSelectedMarker 함수 내에 마커 이미지 속성을 지정하는 spriteOrigin 옵션에서 인덱스 값을 사용한다.
   • 인덱스 값이 1부터 시작이니 첫 번째 마커 이미지의 영역 좌표는 (1*46)+10이 된다.

-> 이미지 영역 좌표가 문제 원인이였다! 기본으로 설정되어있는 마커 이미지는 하나하나 개별로 된게 아닌 아래와 같이 하나의 png 파일로 되어있었다.

 

🔽 마커 이미지는 더보기 클릭

 

• 즉, 지도에 마커 이미지를 나타낼 때는 마커 이미지(스프라이트 이미지)내에서 크기와 좌표로 사용할 영역 외엔 다 감춰지게 잘라서 화면에 나타내는 것 이였다!
• 인덱스 값으로 i를 썼을 때는 i=0부터 시작이였기 때문에 좌표가 (0*46)+10이 되어서 1이 적힌 마커 이미지 부분이 나타났는데, 인덱스 값을 배열의 길이로 지정했기 때문에 1부터 시작해서 좌표가 틀어진게 문제였다.
• 좌표 지정 코드를 ((idx-1)*46)+10로 지정해줌으로써 정상적으로 잘 동작했다!

-1을 해줌으로써 수정 완료!