카카오 개발자 카카오 지도 목적지 검색 API 서비스를 사용해보도록하지

https://developers.kakao.com/

 

카카오 개발자로 검색해서 페이지로 들어가보도록 합시다

Kakao Developers

로그인을 하도록 합시다 

내 애플리케이션을 클릭하면 애플리케이션 추가하기가 있습니다. 

앱이름이나 사업자명은 원하시는데로 입력해주면 됩니다. 

이미지는 딱히 업로드 안 해도 됩니다. 

추가가 됩니다. 

당연히 그렇듯이 키 값이 중요합니다. 

허용 IP 주소도 등록해줍니다. 

로컬 굳이 등록할 필요 없을까요 ? 저는 그냥 했습니다 .

플랫폼 설정하기 뭘까요 

들어가봅니다.

내가 제공하고자 하는 서비스에 맞게 선택하면 될 것 같습니다. 

지금은 개발 단계이니 

http://localhost:3000 뭐 이런 

개발 서버 url 을 일단 등록하면 됩니다. 

https://developers.kakao.com/docs/latest/ko/getting-started/app#platform-web

Kakao Developers

가이드도 친절하게 설명 되어있네요 

 <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey={APPKEY}&libraries=services"></script>

해당 스크립트를 사용하면 map api를 불러 올수 있습니다 

해당 APPKEY 는 

JavaScript 키를 가져와서 사용하면 됩니다. 

 

그러면 여기서 그치지 않고 

간단하게 

검색기능까지 구현해보겠습니다. 

<div id="search">
  <input id="search_input" placeholder="목적지를 입력해주세요" />
  <button id="search_button">검색</button>
</div>

간단하게 검색 input 창과 button을 만들어줍니다 .

그리고 저는 JQuery를 사용하고싶습니다. 

https://releases.jquery.com/

jQuery CDN

<script
  src="https://code.jquery.com/jquery-3.7.1.min.js"
  integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
  crossorigin="anonymous"
></script>

JQuery는 요렇게 사용하면 됩니다.

해당 input 과 button의 이벤트를 생성해보겠습니다. 

let ps = new kakao.maps.services.Places();
let search_arr = [];

$("#search_input").on("keydown", function (e) {
if (e.keyCode == 13) {
  let content = $(this).val();
  ps.keywordSearch(content, placeSearchCB);
}
});
$("#search_button").on("click", function (e) {
let content = $("search_input").val();
ps.keywordSearch(content, placeSearchCB);
});

 

보시면  kakao.maps에서 제공하고 있는 서비스를 이용하고 있습니다. 

function placeSearchCB(data, status, pagination) {
        if (status === kakao.maps.services.Status.OK) {
          let target = data[0];
          const lat = target.y;
          const lng = target.x;

          const latlng = new naver.maps.LatLng(lat, lng);

          marker = new naver.maps.Marker({
            position: latlng,
            map: map,
          });
          if (search_arr.length == 0) {
            search_arr.push(marker);
          } else {
            search_arr.push(marker);
            let pre_marker = search_arr.slice(0, 1);
            pre_marker[0].setMap(null);
          }
          map.setZoom(16, false);
          map.panTo(latlng);
          console.log(target);
        } else {
          alert("검색결과가 없습니다");
        }
      }

https://apis.map.kakao.com/web/documentation/#services_Places_keywordSearch

 

해당 함수관련한 내용은 위의 링크를 통해 상세히 확인 및 추가 개발 가능합니다 .