🔫 트러블슈팅
[카카오 지도 API] 마커 인덱스가 index+1 값으로 표시되는 문제
별이⭐
2024. 9. 13. 15:10
문제 상황
- 이전 글에서 이어지는 문제 상황
- 첫 번째 선택인데 마커 인덱스가 2로 표시되는 문제가 발생했다. 즉, 배열의 길이 +1 값으로 표시됐다.
- 배열의 길이를 콘솔에 찍어서 확인했지만 배열의 길이엔 문제가 없었다.
해결 방법
배열의 길이에는 문제가 없었으니 문제는 addSelectedMarker 함수 내에 있을 것이라 생각하고 살펴봤다.
- handleSelectBtnClick 함수 내에서는 addSelectedMarker 함수를 호출한다.
- addSelectedMarker 함수 내에 마커 이미지 속성을 지정하는 spriteOrigin 옵션에서 인덱스 값을 사용한다.
- 인덱스 값이 1부터 시작이니 첫 번째 마커 이미지의 영역 좌표는 (1*46)+10이 된다.
-> 이미지 영역 좌표가 문제 원인이였다! 기본으로 설정되어있는 마커 이미지는 하나하나 개별로 된게 아닌 아래와 같이 하나의 png 파일로 되어있었다.
🔽 마커 이미지는 더보기 클릭
- 즉, 지도에 마커 이미지를 나타낼 때는 마커 이미지(스프라이트 이미지)내에서 크기와 좌표로 사용할 영역 외엔 다 감춰지게 잘라서 화면에 나타내는 것 이였다!
- 인덱스 값으로 i를 썼을 때는 i=0부터 시작이였기 때문에 좌표가 (0*46)+10이 되어서 1이 적힌 마커 이미지 부분이 나타났는데, 인덱스 값을 배열의 길이로 지정했기 때문에 1부터 시작해서 좌표가 틀어진게 문제였다.
- 좌표 지정 코드를 ((idx-1)*46)+10로 지정해줌으로써 정상적으로 잘 동작했다!
