vue-naver-maps

2018.10.29 01:21

vue-naver-maps

npm npm npm

네이버의 지도 API를 Vue로 간편하게 사용할 수 있게하는 라이브러리입니다.

이 라이브러의 목표는 사용자가 직접 지도 클래스를 다루지 않고도 자바스크립트 기본 타입만으로 다룰 수 있도록 하는 것입니다.

현재 지원하는 컴포넌트

  • naver-maps 네이버 지도
  • naver-marker 마커 컴포넌트
  • naver-info-window InfoWindow 컴포넌트

시작하기

설치 방법

yarn 사용을 권장드립니다.

  • yarn : yarn add vue-naver-maps
  • npm : npm install vue-naver-maps

네이버에서 발급된 지도 API키가 필요합니다. 
기본적으로 네이버 클라우드를 지원하며, 기존 오픈 API 사용시 useOpenAPI를 true로 바꿔줘야합니다.

  • main.js
    import naver from 'vue-naver-maps';
    Vue.use(naver, {
      clientID: 'Q3terhW342KFsdfC1M',
      useOpenAPI: true //OpenAPI 사용
    });
  • .vue파일
    <naver-maps :width="600" :height="400"></naver-maps>

이제, 600x400 사이즈의 지도가 뜨게됩니다.

기본 맵 옵션

<naver-maps :width="600" :height="400"  :mapOptions="mapOptions"></naver-maps>

mapOptions으로 아래와 같은 데이터를 넣을 수 있습니다.

단, lat(위도)과 lng(경도)는 필수 입니다.

mapOptions: {
  zoom?: Number(기본값은 10),
  lat: Number,
  lng: Number,
  zoomControl?: Boolean,
  zoomControlOptions?: {
    position: String
  }
}

zoomControlOptions의 position은 TOP_RIGHT등 기존 JS 라이브러리의 enum 이름을 사용합니다.

추가 옵션 설정하기

기존 js 라이브러리와 마찬가지로, map 객체에 setOptions(options)를 사용할 수 있습니다. 단, 맵이 로딩 된 후에만 사용이 가능합니다.

onLoaded(this)

지도를 효과적으로 컨트롤 하기 위해 onLoaded(this) callback 함수를 사용할 수 있습니다.

<naver-maps :width="600" :height="400" :mapOptions="mapOptions" :onLoaded="callback"></naver-maps>

지도가 로딩되면 호출됩니다. 또한 인자로는 naver-maps 컴포넌트의 this를 넘겨줍니다. this.map으로 네이버 Map 객체에 접근이 가능합니다.

naver-maps

naver-maps컴포넌트에는 기존의 js 라이브러리가 사용했던 메소드들이 있습니다. 예를 들면 기존에는 setCenter 함수를 map.setCenter(new naver.maps.LatLng(lat, lng)); 으로 수행해야 합니다. 하지만 naver-maps 컴포넌트에서는 this.setCenter(lat,lng)으로 사용할 수 있습니다.

현재는 개발 버전이라 naver-maps 컴포넌트에 사용가능한 모든 메소드가 포함되어 있지 않습니다. 이 경우에는 this.map으로 직접 접근해야합니다.

Methods

setOptions(options)

ParamType
optionsObject

setMapType(type)

ParamTypeDescription
typestringNORMAL, TERRAIN, SATELLITE, HYBRID

setZoom(level, useEffect)

ParamTypeDefaultDescription
levelnumbermust be int
useEffectbooleanfalse

setCenter(lat, lng)

ParamType
latnumber
lngnumber

fitBounds(lat, lng)

ParamType
latnumber
lngnumber

panTo(lat, lng)

ParamType
latnumber
lngnumber

panToBounds(lat, lng)

ParamType
latnumber
lngnumber

panBy(x, y)

ParamType
xnumber
ynumber

naver-marker

지도에 마커를 표시해줍니다.

네이버의 이벤트는 @name 으로 접근 가능합니다. 예) @click, @dbclick 등

<naver-maps :width="600" :height="400"  :mapOptions="mapOptions">
    <naver-marker :lat="37" :lng="127" @click="onMarkerClicked" :onLoaded="onMarkerLoaded"></naver-marker>
</naver-maps>
<script>
export default {
  data(){
    return {};
  },
  methods:{
    // naver-marker는 다음과 같은 체이닝이 가능합니다.
    onMarkerLoaded(vue){
      vue.marker.setDraggable(true).setCursor('').setClickable(true);
    },
    onMarkerClicked(event){
      console.log(event); // 네이버 event 객체
    }
  }
}
</script>

Methods

setClickable(clickable) ⇒ Marker

ParamType
clickableboolean

setCursor(cursor) ⇒ Marker

ParamType
cursorstring

setDraggable(draggable) ⇒ Marker

ParamType
draggableboolean

setAnimation(animation) ⇒ Marker

ParamType
animation&#x27;BOUNCE&#x27; | &#x27;DROP&#x27;

setIcon(icon) ⇒ Marker

ParamType
iconstring | ImageIcon | SymbolIcon | HtmlIcon

setOptions(options) ⇒ Marker

ParamType
optionsMarkerOptions

setPosition(position) ⇒ Marker

ParamType
positionCoord | CoordLiteral

setShape(shape) ⇒ Marker

ParamType
shapeMarkerShape

setTitle(title) ⇒ Marker

ParamType
titlestring

setVisible(visible) ⇒ Marker

ParamType
visibleboolean

setZIndex(zIndex) ⇒ Marker

ParamType
zIndexnumber

naver-info-window

<naver-info-window :onLoaded="onWindowLoad" :isOpen="info" :marker="marker">
  <h1>Hello, World!</h1>
</naver-info-window>

OnLoaded

지도가 로딩되면 호출됩니다. 또한 인자로는 naver-info-window 컴포넌트의 this를 넘겨줍니다.

  • this.infoWindow으로 네이버 InfoWindow 객체에 접근이 가능합니다.
  • this.map으로 네이버 Map 객체에 접근이 가능합니다.

Example

<template>
  <naver-maps :height="400" :width="600" :mapOptions="{lat:37,lng:127,zoom:10}" :onLoaded="onLoad">
    <naver-marker :lat="37" :lng="127" @click="onMarkerClicked" :onLoaded="onMarkerLoaded"></naver-marker>
    <naver-info-window :onLoaded="onWindowLoad" :isOpen="info" :marker="marker"><h1>Hello, World!</h1></naver-info-window>
  </naver-maps>
</template>

<script>

  export default {
    name: 'HelloWorld',
    data() {
      return {
        info: false,
        marker: null,
      }
    }, methods: {
      onLoad(vue) {

      },
      onWindowLoad(vue) {

      },
      onMarkerClicked() {
        this.info = !this.info;
      },
      onMarkerLoaded(vue) {
        this.marker = vue.marker;
      }
    }
  }
</script>


'npm' 카테고리의 다른 글

vue-naver-maps  (0) 2018.10.29
업비트 API upbit-api v0.5.0 출시  (0) 2018.09.09
업비트 API upbit-api 0.3.0 출시  (0) 2018.09.09
yahoo-exchange 2.1.0 Release  (0) 2018.09.02
region-name-kr 1.0.0. Released  (0) 2018.08.28
yahoo-exchange 2.0.1 Released  (0) 2018.08.25

+ Recent posts

티스토리 툴바