[카카오맵 API] 카카오맵의 검색 결과가 45개까지만 나온다는 거, 아세요?

 

프로젝트에서 카카오맵 API의 키워드 검색을 활용하게 되었다.

내가 구현하고자 하는 기능은 다음과 같았다.

 

이미지처럼 유저가 홈플러스를 클릭하면 페이지를 이동하여 유저 주변 홈플러스 마트 목록을 보여주고, 이마트를 클릭하면 페이지를 이동하여 주변 이마트 목록을 보여주는 기능이었다.

 

마침 카카오맵 api에 키워드 검색이 있어서, 홈플러스를 클릭하면 api에서 홈플러스 검색 목록을 받아오고, 거기서 유저의 GPS 주변인 것만 필터링해주면 되지 않을까?!ㅎㅎ 하고 쉽게 생각했다.

 

그런데...

 

 

카카오맵 키워드 검색에 홈플러스를 검색한 결과이다. 뭔가 이상하지 않은가?!

전라강원 지역에 홈플러스가 하나도 뜨지 않는 것이다! 게다가 한 페이지당 15개에 총 3 페이지 밖에 없다.

이럴 리가 없다 싶어 찾아보니, 카카오맵 검색 API에서는 최대 45개까지만 검색 결과를 지원한다는 사실을 알게 되었다.

 

그래서 다음과 같이 구현 방식을 수정했다.

 

1. 먼저, 유저의 gelocation으로 유저의 GPS를 가져온다.
2. 카카오맵의 Geocoder를 통해 좌표를 법정 주소로 변환한다.
3. 유저의 주소와 마트명을 함께 검색한다.

 

이렇게 3단계를 거치면, 단순히 '홈플러스'였던 검색어는 '서울특별시 중구 홈플러스'로 탈바꿈할 것이다.

그럼 이제 내가 의도한 대로 기능이 완성되겠지?!

 

아직 남았다. 저렇게 하면 검색 결과에 '홈플러스 주차장'까지 함께 나오게 된다.

따라서 검색결과를 한 번 더 필터링을 거쳐, 카테고리 코드가 MT1(대형마트)인 것만 보여주게끔 하였다.

 

---

 

정리하면, 다음과 같이 로직을 수정한다.

 

01. 유저의 GPS 가져오기

function moveMyGps() {
        if (navigator.geolocation) {
          // GeoLocation을 이용해서 접속 위치를 얻어옵니다
          navigator.geolocation.getCurrentPosition(function (position) {
            let lat = position.coords.latitude; // 위도
            let lon = position.coords.longitude; // 경도
            let locPosition = new window.kakao.maps.LatLng(lat, lon); // 마커가 표시될 위치를 geolocation으로 얻어온 좌표로 생성합니다
            // GPS 좌표를 법정 주소로 변환해주는 함수
            toAddress(lat, lon);
          });
        }
      }

 

02. GPS 좌표를 법정 주소로 변환하기

function toAddress(lat:number, lon:number){
      let geocoder = new window.kakao.maps.services.Geocoder();
      let coord = new window.kakao.maps.LatLng(lat, lon);
      let callback = function(result:any, status:any) {
          if (status === window.kakao.maps.services.Status.OK) {
            setUserAddress([result[0]['address']['region_1depth_name'], result[0]['address']['region_2depth_name'], result[0]['address']['region_3depth_name']])
          }
      }
      geocoder.coord2Address(coord.getLng(), coord.getLat(), callback);
    }

 

03. 유저의 주소명과 마트명을 함께 검색한다.

 function SearchMart(){
      var ps = new window.kakao.maps.services.Places();
      if(userAddress){
        ps.keywordSearch(`${mart} ${userAddress[0]} ${userAddress[1]}`, placesSearchCB)
      }
    }

 

04. 검색 결과에서 마트만 필터링한다.

function placesSearchCB (data:any, status:any) {
      if (status === window.kakao.maps.services.Status.OK) {
          // 검색된 장소 위치를 기준으로 지도 범위를 재설정하기위해
          // LatLngBounds 객체에 좌표를 추가합니다
          var bounds = new window.kakao.maps.LatLngBounds();
          // 카테고리 코드가 MT1인 검색 결과만 필터링한다.
          const filtered_data = data.filter((item:any)=>item['category_group_code'] === 'MT1');
          setMartList(filtered_data)
          for (var i=0; i<filtered_data.length; i++) {
            displayMarker(filtered_data[i]);
            bounds.extend(new window.kakao.maps.LatLng(filtered_data[i].y, filtered_data[i].x));
          }
      }
  }

 

 

완성!!