Socket
Socket
Sign inDemoInstall

vue3-kakao-maps

Package Overview
Dependencies
1
Maintainers
6
Versions
22
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    vue3-kakao-maps

kakao maps component library with vue3 and TS


Version published
Weekly downloads
23
decreased by-82.71%
Maintainers
6
Created
Weekly downloads
 

Readme

Source
Vue logo 카카오맵 api 이미지

vue3-kakao-maps

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

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

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

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

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

Downloads Version License

시작하기

설치

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

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

http://pf.kakao.com/_iiZUG/chat

Keywords

FAQs

Last updated on 19 May 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc