vue-naver-maps

vue-naver-maps

  

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

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

아래의 내용은 이전 정보입니다. 

자세한 내용은 https://shin-jaeheon.github.io/vue-naver-maps을 참조하여주시기 바랍니다.

현재 지원하는 컴포넌트 

• 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)
• setMapType(type)
• setZoom(level, useEffect)
• setCenter(lat, lng)
• fitBounds(lat, lng)
• panTo(lat, lng)
• panToBounds(lat, lng)
• panBy(x, y)

setOptions(options)

Param	Type
options	Object

setMapType(type)

Param	Type	Description
type	string	NORMAL, TERRAIN, SATELLITE, HYBRID

setZoom(level, useEffect)

Param	Type	Default	Description
level	number		must be int
useEffect	boolean	false

setCenter(lat, lng)

Param	Type
lat	number
lng	number

fitBounds(lat, lng)

Param	Type
lat	number
lng	number

panTo(lat, lng)

Param	Type
lat	number
lng	number

panToBounds(lat, lng)

Param	Type
lat	number
lng	number

panBy(x, y)

Param	Type
x	number
y	number

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

• draw() => void;
• getAnimation() => string;
• getClickable() => boolean;
• getCursor() => string;
• getDraggable() => boolean;
• getDrawingRect() => Bounds;
• getIcon() => ImageIcon or SymbolIcon or HtmlIcon;
• getOptions(key?: string) => MarkerOptions;
• getPosition() => Coord;
• getShape() => MarkerShape;
• getTitle() => string;
• getVisible() => boolean;
• getZIndex() => number;
• setClickable(clickable) ⇒ Marker
• setCursor(cursor) ⇒ Marker
• setDraggable(draggable) ⇒ Marker
• setAnimation(animation) ⇒ Marker
• setIcon(icon) ⇒ Marker
• setOptions(options) ⇒ Marker
• setPosition(position) ⇒ Marker
• setShape(shape) ⇒ Marker
• setTitle(title) ⇒ Marker
• setVisible(visible) ⇒ Marker
• setZIndex(zIndex) ⇒ Marker

setClickable(clickable) ⇒ Marker

Param	Type
clickable	boolean

setCursor(cursor) ⇒ Marker

Param	Type
cursor	string

setDraggable(draggable) ⇒ Marker

Param	Type
draggable	boolean

setAnimation(animation) ⇒ Marker

Param	Type
animation	'BOUNCE' | 'DROP'

setIcon(icon) ⇒ Marker

Param	Type
icon	string | ImageIcon | SymbolIcon | HtmlIcon

setOptions(options) ⇒ Marker

Param	Type
options	MarkerOptions

setPosition(position) ⇒ Marker

Param	Type
position	Coord | CoordLiteral

setShape(shape) ⇒ Marker

Param	Type
shape	MarkerShape

setTitle(title) ⇒ Marker

Param	Type
title	string

setVisible(visible) ⇒ Marker

Param	Type
visible	boolean

setZIndex(zIndex) ⇒ Marker

Param	Type
zIndex	number

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>