feat(map): add feature map components

Dongkyuuuu · Aug 28, 2021 · 9284469 · 9284469
1 parent efdc93b
commit 9284469
Show file tree

Hide file tree

Showing 6 changed files with 100 additions and 41 deletions.
diff --git a/playground/App.vue b/playground/App.vue
@@ -1,44 +1,81 @@
 <template>
   <naver-maps
-    width="804px"
-    height="400px"
+    :width="mapSize.width"
+    :height="mapSize.height"
     @updateMap="loadMap($event)"
     :mapOptions="mapOptions"
     :initLayers="initLayers"
-  />
+  >
+  </naver-maps>
   {{ mapOptions }}
+  <br />
+  <br />
+  <br />
+  {{ initLayers }}
+  <button @click="change()">2323</button>
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from "vue";
-import { naverV3, useMap } from "../dist/vue3-naver-maps";
+import { defineComponent, reactive, ref } from "vue";
+import { naverV3 } from "../dist/vue3-naver-maps";
 
 export default defineComponent({
   name: "App",
   setup: () => {
-    const map = ref<any>(null);
-    const mapOptions: naverV3.mapOptions = {
+    const map = ref<naver.maps.Map | null>(null);
+    const mapSize = reactive({
+      width: "400px",
+      height: "400px",
+    });
+    const mapOptions = ref<naverV3.mapOptions>({
       lat: 37,
       lng: 127,
-      zoom: 10,
+      zoom: 12,
       zoomControl: false,
       zoomControlOptions: { position: "TOP_RIGHT" },
       mapTypeControl: false,
-    };
-    const initLayers = [
+    });
+    const initLayers = ref([
       "BACKGROUND",
       "BACKGROUND_DETAIL",
       "POI_KOREAN",
       "TRANSIT",
       "ENGLISH",
-      "CHINESE",
-      "JAPANESE",
-    ];
+    ]);
     const loadMap = (mapObject: naver.maps.Map) => {
       map.value = mapObject;
-      console.log(mapObject);
+      console.log(map.value.getCenter());
+      console.log(`[vue3-naver-maps] map is load!`);
+    };
+
+    const change = () => {
+      // const { setOptions, getCenter } = useMap(map.value!);
+      // const options: naverV3.mapOptions = {
+      //   lat: 37,
+      //   lng: 127,
+      //   zoom: 18,
+      //   zoomControl: false,
+      //   mapTypeControl: false,
+      // };
+      // map.value!.setOptions(options);
+      initLayers.value = [
+        "BACKGROUND",
+        "BACKGROUND_DETAIL",
+        // "POI_KOREAN",
+        "TRANSIT",
+        // "ENGLISH",
+      ];
+      // mapSize.width = "700px";
+      // mapOptions.value = {
+      //   lat: 37,
+      //   lng: 127,
+      //   zoom: 9,
+      //   zoomControl: false,
+      //   zoomControlOptions: { position: "TOP_RIGHT" },
+      //   mapTypeControl: false,
+      // };
     };
-    return { mapOptions, initLayers, loadMap };
+    return { mapOptions, initLayers, loadMap, change, mapSize };
   },
 });
 </script>

diff --git a/playground/vite.config.js b/playground/vite.config.js
@@ -6,6 +6,7 @@ import { resolve } from "path";
 // https://vitejs.dev/config/
 export default defineConfig({
   root: resolve(process.cwd(), "playground"),
+  hmr: { overlay: false },
   build: {
     outDir: "../playground_dist",
     rollupOptions: {

diff --git a/src/apis/useMap.ts b/src/apis/useMap.ts
@@ -85,7 +85,7 @@ export interface useMapSetterMethods {
 
   setOptions(
     optionsOrKey: naver.maps.MapOptions | string,
-    value: naver.maps.MapOptions | null
+    value?: naver.maps.MapOptions | null
   ): void;
 
   setSize(size: naver.maps.Size | naver.maps.SizeLiteral): void;

diff --git a/src/components/Map.vue b/src/components/Map.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="vue-naver-maps" :style="{ width: width, height: height }">
+  <div id="naver-maps" :style="{ width: width, height: height }">
     <slot></slot>
   </div>
 </template>
@@ -10,8 +10,9 @@ import {
   PropType,
   toRefs,
   ref,
-  onBeforeMount,
   onUnmounted,
+  onMounted,
+  watch,
 } from "vue";
 import { useMapInitOptions } from "../utils";
 import type { naverV3 } from "../types";
@@ -30,38 +31,58 @@ export default defineComponent({
       default: [],
     },
   },
+  emits: ["updateMap"],
   setup: (props, { emit }) => {
     const map = ref<naver.maps.Map | null>(null);
     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", {
+      map.value = new window.naver.maps.Map("naver-maps", {
         ...settings,
         ...mapOptions.value,
       });
-
       emit("updateMap", map.value);
     };
 
-    onBeforeMount(() => {
-      document.getElementById("vue3-naver-maps")!.onload = () => {
-        window.naver.maps.onJSContentLoaded = () => initNaverMap();
-      };
+    /**
+     * Props mapOptions watch
+     */
+    watch(
+      () => mapOptions.value,
+      (newMaptions: naverV3.mapOptions, oldMaptions: naverV3.mapOptions) => {
+        map.value!.setOptions(newMaptions);
+      },
+      { deep: true, immediate: false }
+    );
+
+    /**
+     * Props initLayers watch
+     */
+    watch(
+      () => initLayers.value,
+      (
+        newInitLayers: naverV3.initLayer[],
+        oldInitLayers: naverV3.initLayer[]
+      ) => {
+        const options = mapSettings(map.value!.getOptions(), newInitLayers);
+        map.value!.setOptions(options);
+      },
+      { deep: true, immediate: false }
+    );
+
+    onMounted(() => {
+      if (!window.naver) {
+        document.getElementById("vue3-naver-maps")!.onload = () => {
+          window.naver.maps.onJSContentLoaded = () => initNaverMap();
+        };
+      } else {
+        initNaverMap();
+      }
     });
     onUnmounted(() => (map.value = null));
 
-    // watch(
-    //   () => mapOptions.value,
-    //   () => {
-    //     console.log("hello");
-    //     initNaverMap();
-    //   },
-    //   { deep: true, immediate: false }
-    // );
-
     return {
       width,
       height,

diff --git a/src/types/index.ts b/src/types/index.ts
@@ -40,7 +40,7 @@ export namespace naverV3 {
     | "CHINESE"
     | "JAPANESE";
 
-  export interface mapOptions {
+  export interface mapOptions extends naver.maps.MapOptions {
     zoom?: number;
     lat?: number;
     lng?: number;

diff --git a/src/useApi.ts b/src/useApi.ts
@@ -1,7 +1,7 @@
-import { inject, InjectionKey } from "vue";
-import type { useMap as useMapType } from "./apis";
+// 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);
-}
+// export function useMap() {
+//   const mapSymbol: InjectionKey<useMapType> = Symbol("[vue3-naver-maps]useMap");
+//   return inject(mapSymbol);
+// }