feat(docs): update docs

Circle / Ellipse / Rectangle

docs/.vitepress/config.js

@@ -86,6 +86,18 @@ const config = {
                 text: "InfoWindow",
                 link: "/guide/Infowindow",
               },
+              {
+                text: "Circle",
+                link: "/guide/Circle",
+              },
+              {
+                text: "Ellipse",
+                link: "/guide/Ellipse",
+              },
+              {
+                text: "Rectangle",
+                link: "/guide/Rectangle",
+              },
             ],
           },
           {

docs/.vitepress/theme/index.js

@@ -3,12 +3,18 @@ import theme from "vitepress/dist/client/theme-default";
 import NaverMaps from "../../example/Map.vue";
 import NaverMarker from "../../example/Marker.vue";
 import NaverInfoWindow from "../../example/InfoWindow.vue";
+import NaverCircle from "../../example/Circle.vue";
+import NaverEllipse from "../../example/Ellipse.vue";
+import NaverRectangle from "../../example/Rectangle.vue";
 
 export default {
   ...theme,
   enhanceApp({ app, router, siteData }) {
     app.component("naver-maps", NaverMaps);
     app.component("naver-marker", NaverMarker);
     app.component("naver-info-window", NaverInfoWindow);
+    app.component("naver-circle", NaverCircle);
+    app.component("naver-ellipse", NaverEllipse);
+    app.component("naver-rectangle", NaverRectangle);
   },
 };

docs/api/index.md

@@ -71,6 +71,8 @@ app
 
 ## NaverMaps
 
+지도 컴포넌트에서 사용 되는 Props 입니다.
+
 ### width
 
 - **선택**
@@ -132,6 +134,8 @@ app
 
 ## NaverMarker
 
+마커 컴포넌트에서 사용 되는 Props 입니다.
+
 ### latitude
 
 - **필수**
@@ -164,6 +168,8 @@ htmlIcon을 사용하는 경우, 초기 `size`와 `anchor`를 지정합니다. `
 
 ## NaverInfoWindow
 
+정보창 컴포넌트에서 사용 되는 Props 입니다.
+
 ### marker
 
 - **필수**
@@ -189,3 +195,146 @@ htmlIcon을 사용하는 경우, 초기 `size`와 `anchor`를 지정합니다. `
 - **상세:**
 
 정보창에 대한 옵션을 설정합니다.
+
+### @onLoad
+
+- **선택**
+- **반환타입:** `naver.maps.Infowindow`
+- **상세:**
+
+## NaverCircle
+
+원 컴포넌트에서 사용되는 Props 입니다.
+
+### latitude
+
+- **필수**
+- **타입:** `Number`
+- **상세:**
+
+원 컴포넌트의 위도를 설정합니다.
+
+### longitude
+
+- **필수**
+- **타입:** `Number`
+- **상세:**
+
+원 컴포넌트의 경도를 설정합니다.
+
+### radius
+
+- **선택**
+- **타입:** `Number`
+- **상세:**
+
+컴포넌트의 위도,경도 기준 원의 반경입니다. 단위는 미터(m)로 사용 됩니다.
+
+### options
+
+- **선택**
+- **타입:** `naver.maps.CircleOptions`
+- **기본값:** `{}`
+- **상세:**
+
+원 컴포넌트에서 사용 가능한 추가적인 옵션을 입력합니다.
+
+### @onLoad
+
+- **선택**
+- **반환타입:** `naver.maps.Circle`
+- **상세:**
+
+## NaverEllipse
+
+타원 컴포넌트에서 사용되는 Props 입니다.
+
+### bounds
+
+- **필수**
+- **타입:** `naver.maps.Bounds` | `naver.maps.BoundsLiteral`
+- **상세:**
+
+도형의 좌표 경계를 지정합니다.
+
+```js
+// naver.maps.Bounds 타입
+const bounds = new window.naver.maps.LatLngBounds(
+  new window.naver.maps.LatLng(37.565, 126.9761217732253), // sw
+  new window.naver.maps.LatLng(37.568, 126.980655026774) // ne
+);
+```
+
+```js
+// naver.maps.BoundsLiteral 타입
+const bounds = {
+  south: 37.566616443521745,
+  north: 38.566616443521745,
+  west: 126.97837068565364,
+  east: 127.97837068565364,
+};
+```
+
+위와 같은 예제로 bounds를 지정할 수 있습니다.
+
+### options
+
+- **선택**
+- **타입:** `naver.maps.EllipseOptions`
+- **기본값:** `{}`
+- **상세:**
+
+타원 컴포넌트에서 사용 가능한 추가적인 옵션을 입력합니다.
+
+### @onLoad
+
+- **선택**
+- **반환타입:** `naver.maps.Ellipse`
+- **상세:**
+
+## NaverRectangle
+
+사각형 컴포넌트에서 사용되는 Props 입니다.
+
+### bounds
+
+- **필수**
+- **타입:** `naver.maps.Bounds` | `naver.maps.BoundsLiteral`
+- **상세:**
+
+도형의 좌표 경계를 지정합니다.
+
+```js
+// naver.maps.Bounds 타입
+const bounds = new window.naver.maps.LatLngBounds(
+  new window.naver.maps.LatLng(37.565, 126.9761217732253), // sw
+  new window.naver.maps.LatLng(37.568, 126.980655026774) // ne
+);
+```
+
+```js
+// naver.maps.BoundsLiteral 타입
+const bounds = {
+  south: 37.566616443521745,
+  north: 38.566616443521745,
+  west: 126.97837068565364,
+  east: 127.97837068565364,
+};
+```
+
+위와 같은 예제로 bounds를 지정할 수 있습니다.
+
+### options
+
+- **선택**
+- **타입:** `naver.maps.RectangleOptions`
+- **기본값:** `{}`
+- **상세:**
+
+사각형 컴포넌트에서 사용 가능한 추가적인 옵션을 입력합니다.
+
+### @onLoad
+
+- **선택**
+- **반환타입:** `naver.maps.Rectangle`
+- **상세:**

docs/example/Circle.vue

@@ -0,0 +1,58 @@
+<template>
+  <naver-maps
+    width="100%"
+    height="400px"
+    :mapOptions="mapOptions"
+    :initLayers="initLayers"
+    @onLoad="onLoadMap($event)"
+  >
+    <naver-circle
+      :latitude="37.56663888630603"
+      :longitude="126.97838310403904"
+      :radius="350"
+      @onLoad="onLoadCircle($event)"
+    />
+  </naver-maps>
+</template>
+
+<script>
+import { ref } from "vue";
+import { NaverMaps, NaverCircle } from "../../dist/vue3-naver-maps";
+
+export default {
+  components: { NaverMaps, NaverCircle },
+  setup: () => {
+    const map = ref();
+    const circle = ref();
+    const mapOptions = {
+      latitude: 37.56663888630603, // 지도 중앙 위도
+      longitude: 126.97838310403904, // 지도 중앙 경도
+      zoom: 16,
+      zoomControl: false,
+      zoomControlOptions: { position: "TOP_RIGHT" },
+    };
+    const initLayers = [
+      "BACKGROUND",
+      "BACKGROUND_DETAIL",
+      "POI_KOREAN",
+      "TRANSIT",
+      "ENGLISH",
+    ];
+
+    const onLoadMap = (mapObject) => {
+      map.value = mapObject;
+    };
+    const onLoadCircle = (circleObject) => {
+      circle.value = circleObject;
+    };
+
+    return {
+      map,
+      mapOptions,
+      initLayers,
+      onLoadMap,
+      onLoadCircle,
+    };
+  },
+};
+</script>

docs/example/Ellipse.vue

@@ -0,0 +1,60 @@
+<template>
+  <naver-maps
+    width="100%"
+    height="400px"
+    :mapOptions="mapOptions"
+    :initLayers="initLayers"
+    @onLoad="onLoadMap($event)"
+  >
+    <naver-ellipse :bounds="ellipseBound" @onLoad="onLoadEllipse($event)" />
+  </naver-maps>
+</template>
+
+<script>
+import { ref } from "vue";
+import { NaverMaps, NaverEllipse } from "../../dist/vue3-naver-maps";
+
+export default {
+  components: { NaverMaps, NaverEllipse },
+  setup: () => {
+    const map = ref();
+    const ellipse = ref();
+    const ellipseBound = ref({
+      south: 36,
+      north: 38,
+      west: 126,
+      east: 128,
+    });
+    const mapOptions = {
+      latitude: 37.56663888630603, // 지도 중앙 위도
+      longitude: 126.97838310403904, // 지도 중앙 경도
+      zoom: 8,
+      zoomControl: false,
+      zoomControlOptions: { position: "TOP_RIGHT" },
+    };
+    const initLayers = [
+      "BACKGROUND",
+      "BACKGROUND_DETAIL",
+      "POI_KOREAN",
+      "TRANSIT",
+      "ENGLISH",
+    ];
+
+    const onLoadMap = (mapObject) => {
+      map.value = mapObject;
+    };
+    const onLoadEllipse = (ellipseObject) => {
+      ellipse.value = ellipseObject;
+    };
+
+    return {
+      map,
+      mapOptions,
+      initLayers,
+      onLoadMap,
+      onLoadEllipse,
+      ellipseBound,
+    };
+  },
+};
+</script>

docs/example/Map.vue

@@ -16,7 +16,7 @@ import { NaverMaps } from "../../dist/vue3-naver-maps";
 export default {
   components: { NaverMaps },
   setup: () => {
-    const map = ref(null);
+    const map = ref();
     const mapOptions = {
       latitude: 37.56663888630603, // 지도 중앙 위도
       longitude: 126.97838310403904, // 지도 중앙 경도