vue-daum-map

다음 지도를 래핑한 Vue.js 컴포넌트입니다.

데모

Demo

참고 사항

• 중심좌표와 레벨값은 sync 됩니다.
• 지도가 로드되면 load 이벤트가 발생하며, 파라미터로 넘어오는 map 객체를 통해 지도를 직접 컨트롤 가능합니다. 또한 daum 객체를 넘겨 사용자가 임의로 객체를 생성할 수 있도록 한다.
• 지도에서 발생하는 Events 들은 모두 그대로 내어주고 있으므로 필요시 바인딩하여 사용하시면 됩니다.
• appKey 는 다음 지도 Web API 가이드를 참고하여 새로 발급받아 사용하세요.

개발 환경 & 도구

• Node.js 8.x
• Vue.js 2.x
• ES2015
• Webpack 4.x
• Daum Map SDK 4.0.5

하위 버전에서는 테스트하지 않았습니다.

설치

$ npm install vue-daum-map --save
# 혹은
$ yarn add vue-daum-map

컴포넌트 사용 예제

템플릿 예제

<vue-daum-map
      :appKey="appKey"
      :center.sync="center"
      :level.sync="level"
      :mapTypeId="mapTypeId"
      :libraries="libraries"
      @load="onLoad"
      @center_changed=""
      @zoom_start=""
      @zoom_changed=""
      @bounds_changed=""
      @click=""
      @dblclick=""
      @rightclick=""
      @mousemove=""
      @dragstart=""
      @drag=""
      @dragend=""
      @idle=""
      @tilesloaded=""
      @maptypeid_changed=""
      style="width:500px;height:400px;"/>

import VueDaumMap from 'vue-daum-map'

속성 예제

{
    data: () => ({
        appKey: 'd650a15bea81e28dadb716657ad03d75', // 테스트용 appkey
        center: {lat:33.450701, lng:126.570667}, // 지도의 중심 좌표
        level: 3, // 지도의 레벨(확대, 축소 정도),
        mapTypeId: VueDaumMap.MapTypeId.NORMAL, // 맵 타입
        libraries: [], // 추가로 불러올 라이브러리
        map: null, // 지도 객체. 지도가 로드되면 할당됨.
        daum: null, // 다음 API 객체. 지도가 로드되면 할당됨.
    }),
}

메서드 예제

{
    methods: {
        // 지도가 로드 완료되면 load 이벤트 발생
        onLoad (map, daum) {
            this.map = map;
            this.daum = daum;
        }
    }
}

Props

prop	type	required	description
appKey	String	true	App key
libraries	Array	false	추가로 불러올 라이브러리 ex) ['services', 'clusterer', 'drawing']
center	Object	true	{lat:33.450701, lng:126.570667}
level	Number	false	지도의 레벨(확대, 축소 정도)
mapTypeId	Number	false	일반지도 : VueDaumMap.MapTypeId.NORMAL 스카이뷰: VueDaumMap.MapTypeId.HYBRID
draggable	Boolean	false	마우스 드래그, 휠, 모바일 터치를 이용한 시점 변경(이동, 확대, 축소) 가능 여부
scrollwheel	Boolean	false	마우스 휠, 모바일 터치를 이용한 확대 및 축소 가능 여부
disableDoubleClick	Boolean	false	더블클릭 이벤트 및 더블클릭 확대 가능 여부
disableDoubleClickZoom	Boolean	false	더블클릭 확대 가능 여부
projectionId	String	false	투영법 지정
tileAnimation	Boolean	false	지도 타일 애니메이션 설정 여부
keyboardShortcuts	Boolean or Object	false	키보드의 방향키와 +, – 키로 지도 이동,확대,축소 가능 여부

Events

event	description
load	다음 맵이 로드된 직후 발생한다.
center_changed	중심 좌표가 변경되면 발생한다.
zoom_start	확대 수준이 변경되기 직전 발생한다.
zoom_changed	확대 수준이 변경되면 발생한다.
bounds_changed	지도 영역이 변경되면 발생한다.
click	지도를 클릭하면 발생한다.
dblclick	지도를 더블클릭하면 발생한다.
rightclick	지도를 마우스 오른쪽 버튼으로 클릭하면 발생한다.
mousemove	지도에서 마우스 커서를 이동하면 발생한다.
dragstart	드래그를 시작할 때 발생한다.
drag	드래그를 하는 동안 발생한다.
dragend	드래그가 끝날 때 발생한다.
idle	중심 좌표나 확대 수준이 변경되면 발생한다. 단, 애니메이션 도중에는 발생하지 않는다.
tilesloaded	확대수준이 변경되거나 지도가 이동했을때 타일 이미지 로드가 모두 완료되면 발생한다.
maptypeid_changed	지도 기본 타일(일반지도, 스카이뷰, 하이브리드)이 변경되면 발생한다.