[Vue] 카카오맵 API 사용법 간단 정리

안녕하세요~~~~ㅎㅎㅎ

싸피 들어온 지가 엊그제 같은데 벌써 1학기가 끝나가네요😢

 

이제 곧 관통 프로젝트를 앞두고 있는데요!! 어떤 주제든 지도 API를 사용하실 거 같아요.

그래서 지도 API를 미리 사용해 봤습니당! 전 카카오맵 API를 썼고, 이에 대해 정리해 보도록 하겠습니다🧐

 

 

---

 

1. API 키 발급

먼저 카카오맵 API를 쓰기 위해서는 여기에서 API 키를 발급받아야 합니다.

 

애플리케이션 추가하기를 누르고 정보를 입력해 주세요.

 

추가한 애플리케이션을 들어가면 이렇게 뜨는데, 저는 Vue에서 카카오맵을 활용해 개발할 거라 JavaScript 키를 사용할 거예요.

그리고 아래 플랫폼 설정하기를 눌러서 도메인을 등록합니다. 저는 처음에 Web에 http://localhost:5173을 등록했고, 이후에 포트번호를 바꾸면서 수정해 줬습니다. 포트 번호 바꾸면 꼭 여기에서도 수정해주셔야 해요! 전 까먹고 수정 안 했다가 지도가 안 떴는데 포트번호 바꿔놓고 여기에 등록을 안 해줘서 그런 거였어요.. 🙃

 

2. 지도 생성하기

npm create vue로 Vue 프로젝트를 생성합니다. 사용하지 않는 파일들은 지워주고, MapComponent.vue 파일을 만들어서 기본 지도 생성 코드를 작성해볼게요.

카카오맵에서 제공하는 예제를 참고하여 Vue3 SFC 내에서 Composition API 방식으로 작성했습니다.

 

아래 코드의 API 키 위치에 본인 API 키로 바꿔주시면 됩니다.

저는 .env에서 관리했는데, 저처럼 하시려면 프로젝트에 .env 파일 만들어서 VITE_KAKAO_MAP_KEY='본인API키' 이렇게 넣어주시면 돼요. 자세한 건 여기를 참고해 주세요.

<script setup>
import { ref, onMounted } from 'vue'
const { VITE_KAKAO_MAP_KEY } = import.meta.env

const mapContainer = ref(null)

onMounted(() => {
  loadKakaoMap(mapContainer.value)
})

const loadKakaoMap = (container) => {
  const script = document.createElement('script')
  script.src = `https://dapi.kakao.com/v2/maps/sdk.js?appkey=${VITE_KAKAO_MAP_KEY}&autoload=false`
  document.head.appendChild(script)

  script.onload = () => {
    window.kakao.maps.load(() => {
      const options = {
        center: new window.kakao.maps.LatLng(33.450701, 126.570667),
        level: 3
      }

      const mapInstance = new window.kakao.maps.Map(container, options)
    })
  }
}
</script>

<template>
  <div ref="mapContainer" style="width: 100%; height: 70vh"></div>
</template>

<style scoped>
</style>

 

Map 객체의 두 번째 파라미터에 넣는 options에는 아래와 같은 속성들을 설정할 수 있습니다.

Options (Object)

• container (Node) : 지도가 표시될 HTML element
• options (Object)
  • center (LatLng) : 중심 좌표 (필수)
  • level (Number) : 확대 수준 (기본값: 3)
  • mapTypeId (MapTypeId) : 지도 종류 (기본값: 일반 지도)
  • draggable (Boolean) : 마우스 드래그, 휠, 모바일 터치를 이용한 시점 변경(이동, 확대, 축소) 가능 여부
  • scrollwheel (Boolean) : 마우스 휠, 모바일 터치를 이용한 확대 및 축소 가능 여부
  • disableDoubleClick (Boolean) : 더블클릭 이벤트 및 더블클릭 확대 가능 여부
  • disableDoubleClickZoom (Boolean) : 더블클릭 확대 가능 여부
  • projectionId (String) : 투영법 지정 (기본값: kakao.maps.ProjectionId.WCONG)
  • tileAnimation (Boolean) : 지도 타일 애니메이션 설정 여부 (기본값: true)
  • keyboardShortcuts (Boolean | Object) : 키보드의 방향키와 +, – 키로 지도 이동,확대,축소 가능 여부 (기본값: false)
    • speed (Number) : 지도 이동 속도

 

카카오맵 Docs에서 제공하는 메소드와 이벤트를 확인할 수 있어요.

여러 Sample도 제공하니 원하는 기능을 찾아보고 적용해 보세요~😉

 

3. npm 라이브러리

2번 방법 외에도 npm 라이브러리를 사용하는 방법도 있습니다!

npm 라이브러리를 사용하고 싶으신 분은 여기를 확인해 주세요💌

 

---

 

다들 좋은 결과물내시길 바랍니당.

일주일만 빠이팅!!!!!!💪💪💪