vue3-naver-maps

Map

NaverMap 컴포넌트는 지도를 생성하는 컴포넌트 입니다. 해당 컴포넌트를 사용하지 않고 다른 컴포넌트를 사용하는 경우 동작하지 않습니다. 모든 컴포넌트 중 가장 먼저 사용해주셔야 합니다.

예시

자세한 Props, Emit 옵션은 레퍼런스에서 확인 가능합니다.

<script setup>
import { ref } from "vue";
import { NaverMap } from "vue3-naver-maps";

const map = ref();
const mapOptions = {
  latitude: 37.51347, // 지도 중앙 위도
  longitude: 127.041722, // 지도 중앙 경도
  zoom: 13,
  zoomControl: false,
  zoomControlOptions: { position: "TOP_RIGHT" },
};
const initLayers = [
  "BACKGROUND",
  "BACKGROUND_DETAIL",
  "POI_KOREAN",
  "TRANSIT",
  "ENGLISH",
];

const onLoadMap = (mapObject) => {
  map.value = mapObject;
};
</script>

<template>
  <naver-map
    style="width: 100%; height: 400px"
    :mapOptions="mapOptions"
    :initLayers="initLayers"
    @onLoad="onLoadMap($event)"
  >
  </naver-map>
</template>

설정

모든 Props는 필수 값이 아닙니다. 해당 Props이 없는 경우 기본값이 적용 됩니다. @onLoad도 마찬가지로 naver 객체를 설정할 일이 없으면 사용하지 않아도 상관 없습니다.

안내

기본 값은 네이버에서 제공하는 기본 값으로 설정 됩니다.

UI 이벤트

이벤트에 대한 자세한 설명은 이벤트 상세설명open in new window에서 확인 가능합니다.

Mouse

  • mousedown
  • mouseup
  • click
  • dblclick
  • rightclick
  • mouseover
  • mouseout
  • mousemove

Drag

  • dragstart
  • drag
  • dragend

Touch

  • touchstart
  • touchmove
  • touchend
  • pinchstart
  • pinch
  • pinchend
  • tap
  • longtap
  • twofingertap
  • doubletap

Map

  • addLayer
  • bounds_changed
  • center_changed
  • centerPoint_changed
  • idle
  • init_stylemap
  • keydown
  • keyup
  • mapType_changed
  • mapTypeId_changed
  • panning
  • projection_changed
  • removeLayer
  • resize
  • size_changed
  • tilesloaded
  • zoom_changed
  • zooming
Last Updated:
Contributors: dongkyuuuu