feat: add map component

src/apis/useMap.ts

@@ -1,9 +1,107 @@
-/*
+export interface useMapMethods {
+  setLayerTypeId(typeId: string): void;
 
-  naver.maps.Map Methods
+  addPane(name: string, elementOrZIndex: HTMLElement | number): void;
 
-*/
-function _useMapMethods(map: naver.maps.Map) {
+  destroy(): void;
+
+  fitBounds(
+    bounds:
+      | naver.maps.Bounds
+      | naver.maps.BoundsLiteral
+      | naver.maps.ArrayOfCoords
+      | naver.maps.ArrayOfCoordsLiteral,
+    margin: number
+  ): void;
+
+  morph(
+    coord: naver.maps.Coord | naver.maps.CoordLiteral,
+    zoom?: number,
+    transitionOptions?: naver.maps.TransitionOptions
+  ): void;
+
+  panTo(
+    coord: naver.maps.Coord | naver.maps.CoordLiteral,
+    transitionOptions: naver.maps.TransitionOptions
+  ): void;
+
+  panToBounds(
+    bounds: naver.maps.Bounds | naver.maps.BoundsLiteral,
+    transitionOptions: naver.maps.TransitionOptions,
+    margin: naver.maps.Margin
+  ): void;
+
+  panBy(x: number, y: number): void;
+
+  refresh(noEffect: boolean): void;
+
+  removePane(name: string): void;
+
+  updateBy(
+    coord: naver.maps.Coord | naver.maps.CoordLiteral,
+    zoom: number
+  ): void;
+
+  zoomBy(
+    deltaZoom: number,
+    zoomOrigin: naver.maps.Coord | naver.maps.CoordLiteral | undefined,
+    effect: boolean
+  ): void;
+}
+
+export interface useMapGetterMethods {
+  getBounds(): naver.maps.Bounds;
+
+  getCenter(): naver.maps.Coord;
+
+  getCenterPoint(): naver.maps.Coord;
+
+  getElement(): HTMLElement;
+
+  getMapTypeId(): string;
+
+  getOptions(key: string | undefined): any;
+
+  getPanes(): naver.maps.MapPanes;
+
+  getPrimitiveProjection(): naver.maps.Projection;
+
+  getProjection(): naver.maps.MapSystemProjection;
+
+  getSize(): naver.maps.Size;
+
+  getZoom(): number;
+}
+
+export interface useMapSetterMethods {
+  setCenter(
+    latOrLatLng: naver.maps.LatLng | naver.maps.LatLngLiteral | number,
+    lng: number
+  ): void;
+
+  setCenterPoint(point: naver.maps.Point | naver.maps.PointLiteral): void;
+
+  setMapTypeId(type: "NORMAL" | "TERRAIN" | "SATELLITE" | "HYBRID"): void;
+
+  setOptions(
+    optionsOrKey: naver.maps.MapOptions | string,
+    value: naver.maps.MapOptions | null
+  ): void;
+
+  setSize(size: naver.maps.Size | naver.maps.SizeLiteral): void;
+
+  setZoom(level: number, useEffect: boolean): void;
+}
+
+export interface useMap
+  extends useMapMethods,
+    useMapGetterMethods,
+    useMapSetterMethods {}
+
+/**
+ * naver.maps.Map Methods
+ */
+function _useMapMethods(map: naver.maps.Map): useMapMethods {
   const setLayerTypeId = (typeId: string) => {
     map.mapTypes.setLayerTypeId(typeId);
   };
@@ -100,12 +198,10 @@ function _useMapMethods(map: naver.maps.Map) {
   };
 }
 
-/*
-
-  naver.maps.Map Getter Methods
-
-*/
-function _useMapGetterMethods(map: naver.maps.Map) {
+/**
+ * naver.maps.Map Getter Methods
+ */
+function _useMapGetterMethods(map: naver.maps.Map): useMapGetterMethods {
   const getBounds = (): naver.maps.Bounds => {
     return map.getBounds();
   };
@@ -165,12 +261,10 @@ function _useMapGetterMethods(map: naver.maps.Map) {
   };
 }
 
-/*
-
-  naver.maps.Map Setter Methods
-
-*/
-function _useMapSetterMethods(map: naver.maps.Map) {
+/**
+ * naver.maps.Map Setter Methods
+ */
+function _useMapSetterMethods(map: naver.maps.Map): useMapSetterMethods {
   const setCenter = (
     latOrLatLng: naver.maps.LatLng | naver.maps.LatLngLiteral | number,
     lng: number = 0
@@ -223,7 +317,7 @@ function _useMapSetterMethods(map: naver.maps.Map) {
   };
 }
 
-export function useMap(map: naver.maps.Map) {
+export function useMap(map: naver.maps.Map): useMap {
   return {
     ..._useMapMethods(map),
     ..._useMapGetterMethods(map),

src/components/Map.vue

@@ -15,7 +15,6 @@ import {
 } from "vue";
 import { useMapInitOptions } from "../utils";
 import type { naverV3 } from "../types";
-// import { useMap } from "@/apis";
 
 export default defineComponent({
   name: "Map",
@@ -27,34 +26,42 @@ export default defineComponent({
       required: true,
     },
     initLayers: {
-      type: Array as PropType<naverV3.initLayers>,
+      type: Array as PropType<naverV3.initLayer[]>,
       default: [],
     },
   },
   setup: (props, { emit }) => {
     const map = ref<naver.maps.Map | null>(null);
-    // const { setOptions } = useMap(map.value!);
     const { width, height, mapOptions, initLayers } = toRefs(props);
     const { mapSettings } = useMapInitOptions();
 
     const initNaverMap = () => {
+      map.value = null;
       const settings = mapSettings(mapOptions.value, initLayers.value);
       map.value = new window.naver.maps.Map("vue-naver-maps", {
         ...settings,
         ...mapOptions.value,
       });
+
+      emit("updateMap", map.value);
     };
 
-    const loadNaverMap = () => {
-      if (map.value) return;
+    onBeforeMount(() => {
       document.getElementById("vue3-naver-maps")!.onload = () => {
         window.naver.maps.onJSContentLoaded = () => initNaverMap();
       };
-    };
-
-    onBeforeMount(() => loadNaverMap());
+    });
     onUnmounted(() => (map.value = null));
 
+    // watch(
+    //   () => mapOptions.value,
+    //   () => {
+    //     console.log("hello");
+    //     initNaverMap();
+    //   },
+    //   { deep: true, immediate: false }
+    // );
+
     return {
       width,
       height,

src/types/global.d.ts

@@ -1,10 +1,10 @@
-declare namespace NodeJS {
-  interface Process {
-    browser: boolean;
-  }
-}
-declare interface Window {
-  $naverMapsCallback: [];
-  $naverMapsLoaded: boolean;
-  $naverMapsObject: naver.maps.Map;
-}
+// declare namespace NodeJS {
+//   interface Process {
+//     browser: boolean;
+//   }
+// }
+// declare interface Window {
+//   $naverMapsCallback: [];
+//   $naverMapsLoaded: boolean;
+//   $naverMapsObject: naver.maps.Map;
+// }

src/types/index.ts

@@ -40,8 +40,6 @@ export namespace naverV3 {
     | "CHINESE"
     | "JAPANESE";
 
-  export type initLayers = initLayer[];
-
   export interface mapOptions {
     zoom?: number;
     lat?: number;
@@ -50,5 +48,6 @@ export namespace naverV3 {
     zoomControlOptions?: {
       position?: string;
     };
+    mapTypeControl?: boolean;
   }
 }

src/useApi.ts

@@ -1,3 +1,7 @@
-// import { inject } from "vue";
-// import { routerKey, routeLocationKey } from "./injectionSymbols";
-// import { Router } from "./router";
+import { inject, InjectionKey } from "vue";
+import type { useMap as useMapType } from "./apis";
+
+export function useMap() {
+  const mapSymbol: InjectionKey<useMapType> = Symbol("[vue3-naver-maps]useMap");
+  return inject(mapSymbol);
+}

src/utils/event.ts

@@ -1,5 +1,3 @@
-import { App } from "vue";
-
-export function addEvent(app: App, target: any, name: any) {
+export function addEvent(target: any, name: any) {
   naver.maps.Event.addListener(target, name, (event) => {});
 }

src/utils/mapUtils.ts

@@ -6,7 +6,7 @@ import type { naverV3 } from "../types";
 export function useMapInitOptions() {
   const mapLayers = (
     settings: naver.maps.MapOptions,
-    initLayers: naverV3.initLayers
+    initLayers: naverV3.initLayer[]
   ) => {
     const layers: naverV3.layers = {
       BACKGROUND: "bg",
@@ -35,7 +35,7 @@ export function useMapInitOptions() {
 
   const mapSettings = (
     mapOptions: naverV3.mapOptions,
-    initLayers: naverV3.initLayers
+    initLayers: naverV3.initLayer[]
   ) => {
     const settings: naver.maps.MapOptions = {
       maxZoom: 21,