vue3-kakao-maps

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

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

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

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

시작하기

$3

NPM

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

📧 Contact

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

기여하기

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