[카카오 지도 API] 키워드로 장소검색하고 목록으로 표출하기 예제 코드에서 검색 시 동작 방식 알아보기

자바스크립트의 아주 기초만 알고있는 상태여서 동작 방식 이해하는 게 어려웠다😖

API 문서에 의존해서 코드를 짠 것도 처음이라 많이 헤맸다🥹

 

예제 코드의 동작 방식을 살펴보자

https://apis.map.kakao.com/web/sample/keywordList/#

전체 예제 코드는 위 링크에서 확인할 수 있다.

 

검색 결과 1페이지와 2페이지

 

검색 결과를 표시하고 마커에 지도를 나타내는 주요 함수 흐름을 알아보자!

 

// 키워드 검색을 요청하는 함수입니다
function searchPlaces() {

    const keyword = document.getElementById('keyword').value;

    if (!keyword.replace(/^\s+|\s+$/g, '')) {   // 키워드가 공백만 있는 경우
        alert('키워드를 입력해주세요!');
        return false;
    }

    // 장소검색 객체를 통해 키워드로 장소검색을 요청합니다
    ps.keywordSearch( keyword, placesSearchCB);
}

// 장소검색이 완료됐을 때 호출되는 콜백함수 입니다
function placesSearchCB(data, status, pagination) {
    if (status === kakao.maps.services.Status.OK) {

        // 정상적으로 검색이 완료됐으면
        // 검색 목록과 마커를 표출합니다
        displayPlaces(data);

        // 페이지 번호를 표출합니다
        displayPagination(pagination);

    } else if (status === kakao.maps.services.Status.ZERO_RESULT) {

        alert('검색 결과가 존재하지 않습니다.');
        return;

    } else if (status === kakao.maps.services.Status.ERROR) {

        alert('검색 결과 중 오류가 발생했습니다.');
        return;

    }
}

// 검색 결과 목록과 마커를 표출하는 함수입니다
function displayPlaces(places) {

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

    // 검색 결과 목록에 추가된 항목들을 제거합니다
    removeAllChildNods(listEl);

    // 지도에 표시되고 있는 마커를 제거합니다
    removeMarker();

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

        // 마커를 생성하고 지도에 표시합니다
        const placePosition = new kakao.maps.LatLng(places[i].y, places[i].x),
            marker = addMarker(placePosition, i),
            itemEl = getListItem(i, places[i]); // 검색 결과 항목 Element를 생성합니다

        // 검색된 장소 위치를 기준으로 지도 범위를 재설정하기위해
        // LatLngBounds 객체에 좌표를 추가합니다
        bounds.extend(placePosition);

        // 마커와 검색결과 항목에 mouseover 했을때
        // 해당 장소에 인포윈도우에 장소명을 표시합니다
        // mouseout 했을 때는 인포윈도우를 닫습니다
        (function(marker, title) {
            kakao.maps.event.addListener(marker, 'mouseover', function() {
                displayInfowindow(marker, title);
            });

            kakao.maps.event.addListener(marker, 'mouseout', function() {
                infowindow.close();
            });

            itemEl.onmouseover =  function () {
                displayInfowindow(marker, title);
            };

            itemEl.onmouseout =  function () {
                infowindow.close();
            };
        })(marker, places[i].place_name);

        fragment.appendChild(itemEl);
    }

    // 검색결과 항목들을 검색결과 목록 Element에 추가합니다
    listEl.appendChild(fragment);
    menuEl.scrollTop = 0;

    // 검색된 장소 위치를 기준으로 지도 범위를 재설정합니다
    map.setBounds(bounds);
}

 

1. 검색 키워드를 입력하고 검색하기 버튼을 클릭하면 searchPlaces()가 호출된다.

2. searchPlaces()는 장소 검색 서비스 객체인 kakao.maps.services.Places 객체의 keywordSearch()를 호출한다.

- keywordSearch()는 keywordSearch(keyword, callback, options)를 통해 입력한 키워드로 검색한다.

- keywordSearch() 공식 API 문서 참고: https://apis.map.kakao.com/web/documentation/#services_Places_keywordSearch

3. keywordSearch()의 검색 결과를 placeSearchCB()에서 받는다. placeSearchCB()에서는 매개변수로 검색결과, 상태코드, 페이지네이션 객체를 받는다.

4. placeSearchCB()에서 displayPlaces()를 호출한다. displayPlaces()에서는 placeSearchCB()에서 넘겨준 data를 places라는 파라미터로 받았고, 이를 통해 장소 정보를 받아올 수 있다.

5. displayPlaces()에서 검색 결과를 출력하기 전 removeAllChildNods()와 removeMarker()를 호출해 검색 결과 목록 제거와 지도에 있는 마커를 제거한다.

6. places를 돌면서 addMarker()와 getListItem()를 통해 마커 15개가 지도에 표시되고 검색 결과 목록도 15개씩 생성된다.

- 검색 결과 목록에 있는 개별 항목의 인덱스와 지도에 있는 마커의 인덱스가 같은 숫자로 표시된다.

7. 검색 결과 목록은 페이징 처리가 되어있다. 2페이지를 클릭하면 pagination.gotoPage(i)가 호출되면서 2페이지에 해당하는 검색 결과를 다시 요청하고 장소 검색 콜백 함수인 placesSearchCB()를 호출한다. 1페이지의 검색 결과와 마커들은 removeAllChildNods()와 removeMarker()를 통해 2페이지의 검색 결과로 갱신되기 전 제거된다. 즉, 처음 검색했을 때와 마찬가지로 동작하게된다.

 

이 예제 코드를 어떻게 바꿀까?

1. (기존) 검색 키워드를 입력하면 동시에 15개의 마커를 표시

(변경) 목록에서 선택한 항목의 마커만 지도에 표시

 

2. (기존) 검색 결과 목록에 있는 개별 항목의 인덱스와 마커의 인덱스를 같은 숫자로 표시

(변경) 개별 항목을 누른 순서에 맞게 지도에 표시되는 마커의 숫자를 지정 (왜? 경로를 나타낼거라서)