ryutest

vue3-kakao-maps

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

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

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

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

!! 현재 24년 5월 중순 완성을 목표로 개발 중입니다. 하단 개발 일정 확인하시어 다운로드 하시기 바랍니다.

vue3-kakao-maps에 관한 소중한 생각을 남겨주세요!

시작하기

설치

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';

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>

개발 일정

2024.04.23 (v1.0.0)

• 지도 생성하기
• 지도 이동시키기
• 마커 생성하기

2024.04.26

• 지도 정보 얻어오기
• 여러개 마커 표시하기
• 여러개 마커 제어하기
• 마커 리스트 관리하기
• 다른 이미지로 마커 생성하기
• 마커에 인포윈도우 표시하기
• 이미지 마커와 커스텀 오버레이

2024.05.03

• 마커 클러스터
• 화면에 보이는 마커만 렌더링 최적화
• 마커 선으로 연결하기
• 좌표 주소로 변환하기
• 영역 변경 이벤트 등록하기
• 지도 반응형 처리
• 주소로 장소 표시하기
• order로 마커 생성하기
• 클릭 이벤트 등록하기

2024.05.10

• 클릭한 위치에 마커 표시하기
• 이동 이벤트 등록하기
• 확대, 축소 이벤트 등록하기
• 키워드로 장소 검색하기
• geolocation으로 마커 표시하기

2024.05.17

• 카테고리로 장소 검색하기
• 중심좌표 변경 이벤트 등록하기
• 타일로드 이벤트 등록하기
• 로딩 스피너

📧 Contact

문의사항이 있거나 도움이 필요한 경우 하단의 이메일로 연락주시기 바립니다.

• [e-mail]