kakao maps component library with vue3 and TS
npm install vue3-kakao-mapsvue3-kakao-maps는 Vue3로 Kakao Map API를 손쉽게 사용할 수 있도록 개발된 컴포넌트 라이브러리입니다.
지도, 마커, 인포윈도우, 커스텀 오버레이, 마커 클러스터등을 컴포넌트 형태로 제공합니다.
npm i vue3-kakao-maps
`
Yarn
`
yarn add vue3-kakao-maps
`
PNPM
`
pnpm install vue3-kakao-maps
`
$3
1. 카카오맵 API 로드
main.{js|ts}에서 useKakao('API key') 호출을 통해 카카오맵 API를 로드합니다.
참고: API key 발급 관련 내용은 공식 문서을 참고해주세요.
`js
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을 전달할 수 있습니다.
`vue
`
vue3-kakao-maps로 만든 결과물
vue3-kakao-maps에서 제공하는 마커, 커스텀 오버레이, 폴리라인, 키워드 검색`을 활용한 예제입니다. 여러 개의 마커를 사용하거나 이벤트를 추가할 수 있습니다.