🛠️ Project/🗺️ Kakao Maps API

[카카오 지도 API] 장소를 선택한 순서대로 마커 숫자 지정하기

별이⭐ 2024. 9. 18. 23:50

보완해야했던 문제를 해결해보자

이전 게시글에 있던 보완해야할 점을 해결해보자.

2024.09.12 - [🛠️ Project/🗺️ Kakao Maps API] - [카카오 지도 API] 장소 검색 목록에서 선택한 장소만 지도에 마커 표시하기

  • 검색 결과 목록에서 항목을 선택하면 마커가 표시된다.
    하지만 현재는 선택한 순서대로 마커에 번호가 매겨지는 것이 아닌, 검색 결과 목록의 순서로 정해진다.
    그럼 2 페이지에서 항목을 선택하게되면 겹치는 숫자가 발생하기 때문에 구별하기 어려워진다.

 

이전 게시글의 코드에 있던 함수들을 조금 수정해보자.

 

장소를 선택한 순서대로 마커 숫자 지정하기

1. 개별 항목을 구분하는 i를 인덱스로 쓰지 않을 것이기 때문에 displayPlaces 함수 내에서 더이상 handleSelectBtnClick 함수에 매개변수로 i 값을 넘겨줄 필요가 없다. 

displayPlaces()

 

2. 검색 결과 목록에서 마커 이미지를 표시하지 않을 것이기 때문에 이미지를 표시하는 코드도 주석 처리한다.

getListItem()

 

3. handleSelectBtnClick 함수 내에서 index 값을 배열의 길이로 지정했다.

handleSelectBtnClick()

 

 

4. addSelectedMarker 함수 내에 좌표 지정 코드를 ((idx-1)*46)+10로 지정했다.

addSelectedMarker()

 

 

이렇게만 고치면 검색 결과 순서가 아닌, 선택한 순서대로 마커의 숫자가 찍힌다.

 

아래 두 글에 자세한 트러블슈팅 과정을 작성해두었다!

2024.09.13 - [🔫 트러블슈팅] - [카카오 지도 API] 검색 결과 목록의 페이지별 마커 인덱스 겹침 문제

2024.09.13 - [🔫 트러블슈팅] - [카카오 지도 API] 마커 인덱스가 index+1 값으로 표시되는 문제