feat: naver map props list change

Dongkyuuuu · Sep 4, 2021 · fa77dd1 · fa77dd1
1 parent 59c3c76
commit fa77dd1
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 45 deletions.
diff --git a/src/components/Map.vue b/src/components/Map.vue
@@ -26,7 +26,6 @@ export default defineComponent({
     height: { type: String, default: "400px" },
     mapOptions: {
       type: Object as PropType<naverV3.mapOptions>,
-      required: true,
     },
     initLayers: {
       type: Array as PropType<naverV3.initLayer[]>,
@@ -37,17 +36,16 @@ export default defineComponent({
     const map = ref<naver.maps.Map | null>(null);
     const mapRef = ref<HTMLDivElement | null>(null);
     const { width, height, mapOptions, initLayers } = toRefs(props);
-    const { mapSettings } = useMapInitOptions();
+    const { mapLayers } = useMapInitOptions();
 
     provide(naverMapObject, map);
 
     const createMap = () => {
-      const settings = mapSettings(mapOptions.value, initLayers.value);
       map.value = new window.naver.maps.Map(mapRef.value!, {
-        ...settings,
-        ...mapOptions.value,
+        ...(mapOptions?.value ? mapOptions!.value : ""),
       });
 
+      map.value.setOptions("mapTypes", mapLayers(initLayers.value));
       emit("onLoad", map.value);
     };
 
@@ -60,8 +58,10 @@ export default defineComponent({
     watchEffect(() => {
       if (!map.value) return;
 
-      const settings = mapSettings(mapOptions.value, initLayers.value);
-      map.value!.setOptions({ ...settings, ...mapOptions.value });
+      map.value!.setOptions({
+        ...(mapOptions?.value ? mapOptions!.value : ""),
+      });
+      map.value.setOptions("mapTypes", mapLayers(initLayers.value));
     });
 
     onMounted(() =>

diff --git a/src/types/index.ts b/src/types/index.ts
@@ -41,14 +41,8 @@ export namespace naverV3 {
     | "JAPANESE";
 
   export interface mapOptions extends naver.maps.MapOptions {
-    zoom?: number;
     latitude?: number;
     longitude?: number;
-    zoomControl?: boolean;
-    zoomControlOptions?: {
-      position?: string;
-    };
-    mapTypeControl?: boolean;
   }
 
   export interface htmlIcon {

diff --git a/src/utils/map.ts b/src/utils/map.ts
@@ -4,10 +4,7 @@ import type { naverV3 } from "../types";
  *  NaverMap Init Methods
  */
 export function useMapInitOptions() {
-  const mapLayers = (
-    settings: naver.maps.MapOptions,
-    initLayers: naverV3.initLayer[]
-  ) => {
+  const mapLayers = (initLayers: naverV3.initLayer[]) => {
     const layers: naverV3.layers = {
       BACKGROUND: "bg",
       BACKGROUND_DETAIL: "ol",
@@ -24,41 +21,14 @@ export function useMapInitOptions() {
       JAPANESE: "lja",
     };
 
-    settings.mapTypes = new window.naver.maps.MapTypeRegistry({
+    return new window.naver.maps.MapTypeRegistry({
       normal: window.naver.maps.NaverStyleMapTypeOptions.getNormalMap({
         overlayType: initLayers.map((layer) => layers[layer]).join("."),
       }),
     });
-
-    return settings;
-  };
-
-  const mapSettings = (
-    mapOptions: naverV3.mapOptions,
-    initLayers: naverV3.initLayer[]
-  ) => {
-    const settings: naver.maps.MapOptions = {
-      maxZoom: 21,
-      minZoom: 0,
-    };
-    const mapOptionsLat =
-      mapOptions.latitude || mapOptions.latitude === 0 ? true : false;
-    const mapOptionsLng =
-      mapOptions.longitude || mapOptions.longitude === 0 ? true : false;
-
-    if (!mapOptionsLat || !mapOptionsLng) {
-      settings.center = new window.naver.maps.LatLng(
-        mapOptions.latitude as number,
-        mapOptions.longitude as number
-      );
-    }
-
-    if (initLayers.length < 1) return settings;
-    else return mapLayers(settings, initLayers);
   };
 
   return {
     mapLayers,
-    mapSettings,
   };
 }