[카카오 지도 API] 검색 결과 목록의 페이지별 마커 인덱스 겹침 문제

문제 상황

1페이지의 1번과 2페이지의 1번을 선택해 마커를 추가하면 지도 상에서 구분하기가 어렵다😖

 

1. [검색하기] 버튼을 눌러 장소 검색을 한다.
2. displayPlaces(places) 함수를 통해 검색 결과 목록이 표시된다.
   • 검색 결과 목록이 페이지 번호를 누를 때 마다 매개 변수 places에 담긴다.
   • 반복문을 돌면서 검색 결과 개별 항목인 itemEl을 만든다.
3. 검색 결과 목록에 있는 마커 이미지는 getListItem 함수에서 itemStr을 통해 페이지 당 1~15까지 생성된다.
   • 이 때, 매개변수로 넘겨주는 i는 0부터 시작이니 0이 아닌 1부터 시작하게 하려고 함수 내에서 index+1을 해주는 코드를 볼 수 있다. (마커 이미지는 클래스 이름으로 지정된 style 코드를 통해 생성된다)
4. 지도에 생성되는 마커 이미지는 addSelectedMarker 함수를 통해 생성되는데, 검색 결과 목록에 있는 마커 이미지와 동일하게 생성된다.
   • 예를 들어, 검색 결과 목록에 1번째 항목인 명동교자의 [선택] 버튼을 클릭할 경우 지도에도 동일하게 1이 적힌 마커가 생성된다.
   • -> 여기서 문제 발생! 만약 검색 결과 목록 1페이지에 있는 1번 항목을 지도에 추가하고, 2페이지에 있는 1번 항목을 지도에 추가할 경우 지도에 1이라고 적힌 마커 이미지가 총 두 개가 보이게 된다! (어느 1이 몇 페이지의 1번 항목인지 모르게 됨)

 

문제 상황 관련 코드

displayPlaces() - 일부 생략

function displayPlaces(places) {

    const listEl = document.getElementById('placesList'),
        menuEl = document.getElementById('menu_wrap'),
        fragment = document.createDocumentFragment(),
        bounds = new kakao.maps.LatLngBounds(),
        listStr = '';

    for ( let i=0; i<places.length; i++ ) {

      const itemEl = getListItem(i, places[i]); // 검색 결과 항목 Element를 생성합니다
      const placePosition = new kakao.maps.LatLng(places[i].y, places[i].x);

      // 항목 당 선택 버튼 클릭 이벤트
      const selectBtn = itemEl.querySelector('.select-btn');
      selectBtn.addEventListener('click', function (event) {
          handleSelectBtnClick(event, places[i], placePosition, i);
        });
	
    ...
}

검색 결과 항목에 마커 이미지를 생성하는 getListItem()

handleSelectBtnClick()

지도에 마커 이미지를 생성하는 addSelectedMarker()

 

해결 방법

• 내가 원하는 동작은 [선택] 버튼을 누르는 순서대로 마커 인덱스가 지정되는 것이다.
• 변경하기 위해서는 places의 개별 항목을 구분하는 i를 인덱스로 쓰는게 아닌, 내가 [선택] 버튼을 누른 항목들의 배열인 selectedPlaces의 길이로 인덱스를 지정할 필요가 있다.
  • 이렇게 하면 마커 인덱스 겹침 문제도 자연스레 해결된다!

 

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

   

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

   

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

   

 

하지만 연관된 문제 발생

• 인덱스가 1부터 잘 진행될 것으로 예상했지만 또 문제가 발생!
• 첫 번째 선택인데 마커 인덱스가 2로 표시되는 문제가 발생했다. 즉, 배열의 길이 +1 값으로 표시됐다.
  • 배열의 길이를 콘솔에 찍어서 확인했지만 배열의 길이엔 문제가 없었다. 

    

연관된 문제도 해결한 과정은 아래 게시글에 작성 완료 !

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