Vue3로 카카오맵을 가장 손쉽게 사용하는 법.

vue3-kakao-maps는 Vue3로 Kakao Map API를 손쉽게 사용할 수 있도록 개발된 컴포넌트 라이브러리입니다.

카카오맵 API의 지도, 마커, 인포윈도우, 커스텀 오버레이, 마커 클러스터등을 컴포넌트 형태로 제공합니다.

사용 예시 및 컴포넌트 별 세부 속성값은 Docs에서 확인하실 수 있습니다.

시작하기

설치

NPM

npm i vue3-kakao-maps

Yarn

yarn add vue3-kakao-maps

PNPM

pnpm install vue3-kakao-maps

첫 지도 그리기

1. 카카오맵 API 로드

main.{js|ts}에서 useKakao('API key') 호출을 통해 카카오맵 API를 로드합니다.

참고: API key 발급 관련 내용은 공식 문서을 참고해주세요.

import { createApp } from 'vue';
import App from './App.vue';
import { useKakao } from 'vue3-kakao-maps/@utils';

useKakao('API key');
createApp(App).mount('#app');

2. 지도 컴포넌트 호출

카카오맵 지도를 띄우기 위해서 KakaoMap 컴포넌트를 사용합니다. props를 통해 카카오맵 API에서 제공하는 다양한 option을 전달할 수 있습니다.

<script setup>
import { KakaoMap, KakaoMapMarker } from 'vue3-kakao-maps';
const coordinate = {
  lat: 37.566826,
  lng: 126.9786567
};
</script>

<template>
  <KakaoMap :lat="coordinate.lat" :lng="coordinate.lng" :draggable="true">
    <KakaoMapMarker :lat="coordinate.lat" :lng="coordinate.lng"></KakaoMapMarker>
  </KakaoMap>
</template>

vue3-kakao-maps로 만든 결과물

vue3-kakao-maps에서 제공하는 마커, 커스텀 오버레이, 폴리라인, 키워드 검색을 활용한 예제입니다. 여러 개의 마커를 사용하거나 이벤트를 추가할 수 있습니다.

📧 Contact

문의사항이 있거나 도움이 필요한 경우 Github 이슈를 달아주세요!

기여하기

아직 Kakao 지도 Web API를 100% 구현하지 못했습니다. 버그 또는 미구현 사항을 보완해서 Pull Request를 보내주시면 같이 잘 쓰도록 하겠습니다.