From aa28d65508d19528fd04fd06d9a1cf67256da0fc Mon Sep 17 00:00:00 2001 From: Dongkyuuuu Date: Wed, 25 Aug 2021 00:07:28 +0900 Subject: [PATCH] feat: add map component --- src/apis/useMap.ts | 128 +++++++++++++++++++++++++++++++++++------ src/components/Map.vue | 23 +++++--- src/types/global.d.ts | 20 +++---- src/types/index.ts | 3 +- src/useApi.ts | 10 +++- src/utils/event.ts | 4 +- src/utils/mapUtils.ts | 4 +- webpack.config.js | 59 ------------------- 8 files changed, 147 insertions(+), 104 deletions(-) delete mode 100644 webpack.config.js diff --git a/src/apis/useMap.ts b/src/apis/useMap.ts index faf52aa..d67b08b 100644 --- a/src/apis/useMap.ts +++ b/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), diff --git a/src/components/Map.vue b/src/components/Map.vue index f7be5d2..75eb2f2 100644 --- a/src/components/Map.vue +++ b/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, + type: Array as PropType, default: [], }, }, setup: (props, { emit }) => { const map = ref(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, diff --git a/src/types/global.d.ts b/src/types/global.d.ts index f5c150e..b67a5b2 100644 --- a/src/types/global.d.ts +++ b/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; +// } diff --git a/src/types/index.ts b/src/types/index.ts index 656ab35..f34af1b 100644 --- a/src/types/index.ts +++ b/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; } } diff --git a/src/useApi.ts b/src/useApi.ts index 360c1a4..f34ce9c 100644 --- a/src/useApi.ts +++ b/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 = Symbol("[vue3-naver-maps]useMap"); + return inject(mapSymbol); +} diff --git a/src/utils/event.ts b/src/utils/event.ts index 707979e..aedc8e0 100644 --- a/src/utils/event.ts +++ b/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) => {}); } diff --git a/src/utils/mapUtils.ts b/src/utils/mapUtils.ts index e8fef5d..404b355 100644 --- a/src/utils/mapUtils.ts +++ b/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, diff --git a/webpack.config.js b/webpack.config.js deleted file mode 100644 index 2322613..0000000 --- a/webpack.config.js +++ /dev/null @@ -1,59 +0,0 @@ -// const path = require("path"); -// const webpack = require("webpack"); -// const CopyPlugin = require("copy-webpack-plugin"); -// const { VueLoaderPlugin } = require("vue-loader"); - -// module.exports = { -// entry: path.resolve(__dirname, "./src/index.ts"), -// mode: "development", -// devtool: "inline-source-map", -// module: { -// rules: [ -// { -// test: /\.(js)x?$/, -// exclude: /node_modules/, -// loader: "babel-loader", -// }, -// { -// test: /\.(ts)x?$/, -// loader: "ts-loader", -// options: { -// appendTsSuffixTo: [/\.vue$/], -// }, -// }, -// { -// test: /\.vue$/, -// loader: "vue-loader", -// }, -// { -// test: /\.css$/i, -// use: ["style-loader", "css-loader"], -// }, -// ], -// }, -// resolve: { -// extensions: [".ts", ".tsx", ".js", ".json", ".vue"], -// modules: [path.resolve(__dirname, "./"), "node_modules"], -// alias: { -// "@": path.resolve(__dirname, "src/"), -// }, -// }, -// output: { -// filename: "vue3-naver-maps.js", -// library: ["Vue3NaverMaps"], -// libraryTarget: "umd", -// path: path.resolve(`${__dirname}`, "dist"), -// }, -// externals: { -// vue: "vue", -// }, -// plugins: [ -// new VueLoaderPlugin(), -// new webpack.ProvidePlugin({ -// process: "process/browser", -// }), -// new CopyPlugin({ -// patterns: [{ from: "./types/vue3-naver-maps.d.ts", to: "./" }], -// }), -// ], -// };