Polygon

NaverPolygon는 폴리곤을 생성하는 컴포넌트 입니다. NaverMap 생성 이후에 사용 가능합니다.

예시

자세한 Props, Emit 옵션은 NaverPolygon에서 확인 가능합니다.

<script setup>
import { ref } from "vue";
import { NaverMap, NaverPolygon } from "../../dist/vue3-naver-maps.esm";

const polygon = ref();
const paths = ref([
  [126.9797895, 37.5670131],
  [126.979215, 37.5649555],
  [126.9766789, 37.5649082],
  [126.9789515, 37.5637645],
  [126.9785598, 37.5614914],
  [126.9804949, 37.5632666],
  [126.9827689, 37.5619065],
  [126.9818039, 37.5639213],
  [126.9837414, 37.5653719],
  [126.9811162, 37.5651081],
]);
const mapOptions = {
  latitude: 37.56663888630603, // 지도 중앙 위도
  longitude: 126.97838310403904, // 지도 중앙 경도
  zoom: 15,
  zoomControl: false,
  zoomControlOptions: { position: "TOP_RIGHT" },
};
const onLoadPolygon = (polygonObject) => {
  polygon.value = polygonObject;
};
</script>

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

설정

paths는 필수적으로 입력해 주셔야 합니다. 연결할 각 좌표를 의미 합니다.

UI 이벤트

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

• click
• clickable_changed
• dblclick
• mousedown
• mouseout
• mouseover
• mouseup
• visible_changed
• zIndex_changed