feat(map): added AMap/Baidu/Google Map example close #81

CHANGELOG.zh_CN.md

@@ -4,6 +4,7 @@
 
 - 图标选择器新增 svg 模式
 - 新增时间组件
+- 新增高德/百度/谷歌地图示例
 
 ### ✨ Refactor
 

build/vite/alias.ts

+import { resolve } from 'path';
+import type { Alias } from 'vite';
+
+function pathResolve(dir: string) {
+  return resolve(__dirname, '.', dir);
+}
+
+export function createAlias(alias: [string, string][]): Alias[] {
+  return alias.map((item) => {
+    const [alia, src] = item;
+    return {
+      find: new RegExp(alia),
+      replacement: pathResolve(src) + '/',
+    };
+  });
+}

build/vite/plugin/index.ts

@@ -47,7 +47,7 @@ export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
   vitePlugins.push(PurgeIcons());
 
   // vite-plugin-style-import
-  vitePlugins.push(configStyleImportPlugin());
+  vitePlugins.push(configStyleImportPlugin(isBuild));
 
   // rollup-plugin-visualizer
   vitePlugins.push(configVisualizerConfig());

build/vite/plugin/styleImport.ts

@@ -5,8 +5,8 @@
 
 import styleImport from 'vite-plugin-style-import';
 
-export function configStyleImportPlugin() {
-  // if (!isBuild) return [];
+export function configStyleImportPlugin(isBuild: boolean) {
+  if (!isBuild) return [];
   const pwaPlugin = styleImport({
     libs: [
       {

package.json

@@ -33,7 +33,7 @@
   },
   "dependencies": {
     "@iconify/iconify": "^2.0.0-rc.6",
-    "@vueuse/core": "^4.3.5",
+    "@vueuse/core": "^4.3.6",
     "@zxcvbn-ts/core": "^0.3.0",
     "ant-design-vue": "2.0.1",
     "apexcharts": "^3.25.0",
@@ -117,7 +117,7 @@
     "vite-plugin-pwa": "^0.5.6",
     "vite-plugin-style-import": "^0.8.1",
     "vite-plugin-svg-icons": "^0.3.4",
-    "vite-plugin-theme": "^0.4.8",
+    "vite-plugin-theme": "^0.5.0",
     "vite-plugin-windicss": "0.8.2",
     "vue-eslint-parser": "^7.6.0",
     "yargs": "^16.2.0"

src/components/Tinymce/src/Editor.vue

@@ -32,6 +32,7 @@
   import { onMountedOrActivated } from '/@/hooks/core/onMountedOrActivated';
   import ImgUpload from './ImgUpload.vue';
   import { useDesign } from '/@/hooks/web/useDesign';
+  import { isNumber } from '/@/utils/is';
 
   const CDN_URL = 'https://cdn.bootcdn.net/ajax/libs/tinymce/5.5.1';
 
@@ -56,7 +57,7 @@
 
       const containerWidth = computed(() => {
         const width = props.width;
-        if (/^[\d]+(\.[\d]+)?$/.test(width.toString())) {
+        if (isNumber(width)) {
           return `${width}px`;
         }
         return width;

src/hooks/web/useScript.ts

@@ -12,6 +12,7 @@ export function useScript(opts: ScriptOptions) {
   const promise = new Promise((resolve, reject) => {
     onMounted(() => {
       const script = document.createElement('script');
+      script.type = 'text/javascript';
       script.onload = function () {
         isLoading.value = false;
         success.value = true;

src/locales/lang/en/routes/demo/charts.ts

 export default {
+  baiduMap: 'Baidu map',
+  aMap: 'A map',
+  googleMap: 'Google map',
   charts: 'Chart',
   map: 'Map',
   line: 'Line',

src/locales/lang/zh_CN/routes/demo/charts.ts

 export default {
+  baiduMap: '百度地图',
+  aMap: '高德地图',
+  googleMap: '谷歌地图',
   charts: '图表',
   map: '地图',
   line: '折线图',

src/main.ts

 import '/@/design/index.less';
 import '@virtual/windi.css';
 
+// Do not introduce on-demand in local development?
+// In the local development for on-demand introduction, the number of browser requests will increase by about 20%.
+// Which may slow down the browser refresh.
+// Therefore, all are introduced in local development, and only introduced on demand in the production environment
+if (import.meta.env.DEV) {
+  import('ant-design-vue/dist/antd.less');
+}
+
 import { createApp } from 'vue';
 import App from './App.vue';
 

src/router/menus/modules/demo/charts.ts

@@ -6,11 +6,37 @@ const menu: MenuModule = {
   menu: {
     name: t('routes.demo.charts.charts'),
     path: '/charts',
+    tag: {
+      content: 'new',
+    },
     children: [
       {
+        path: 'aMap',
+        name: t('routes.demo.charts.aMap'),
+        tag: {
+          dot: true,
+        },
+      },
+
+      {
+        path: 'baiduMap',
+        name: t('routes.demo.charts.baiduMap'),
+        tag: {
+          dot: true,
+        },
+      },
+      {
+        path: 'googleMap',
+        name: t('routes.demo.charts.googleMap'),
+        tag: {
+          dot: true,
+        },
+      },
+      {
         path: 'apexChart',
         name: t('routes.demo.charts.apexChart'),
       },
+
       {
         path: 'echarts',
         name: 'Echarts',

src/router/routes/modules/demo/charts.ts

@@ -14,12 +14,37 @@ const charts: AppRouteModule = {
   },
   children: [
     {
+      path: 'baiduMap',
+      name: 'BaiduMap',
+      meta: {
+        title: t('routes.demo.charts.baiduMap'),
+      },
+      component: () => import('/@/views/demo/charts/map/Baidu.vue'),
+    },
+    {
+      path: 'aMap',
+      name: 'AMap',
+      meta: {
+        title: t('routes.demo.charts.aMap'),
+      },
+      component: () => import('/@/views/demo/charts/map/Amap.vue'),
+    },
+    {
+      path: 'googleMap',
+      name: 'GoogleMap',
+      meta: {
+        title: t('routes.demo.charts.googleMap'),
+      },
+      component: () => import('/@/views/demo/charts/map/Google.vue'),
+    },
+
+    {
       path: 'apexChart',
       name: 'ApexChart',
       meta: {
         title: t('routes.demo.charts.apexChart'),
       },
-      component: () => import('/@/views/demo/echarts/apex/index.vue'),
+      component: () => import('/@/views/demo/charts/apex/index.vue'),
     },
     {
       path: 'echarts',
@@ -33,7 +58,7 @@ const charts: AppRouteModule = {
         {
           path: 'map',
           name: 'Map',
-          component: () => import('/@/views/demo/echarts/Map.vue'),
+          component: () => import('/@/views/demo/charts/Map.vue'),
           meta: {
             title: t('routes.demo.charts.map'),
           },
@@ -41,7 +66,7 @@ const charts: AppRouteModule = {
         {
           path: 'line',
           name: 'Line',
-          component: () => import('/@/views/demo/echarts/Line.vue'),
+          component: () => import('/@/views/demo/charts/Line.vue'),
           meta: {
             title: t('routes.demo.charts.line'),
           },
@@ -49,7 +74,7 @@ const charts: AppRouteModule = {
         {
           path: 'pie',
           name: 'Pie',
-          component: () => import('/@/views/demo/echarts/Pie.vue'),
+          component: () => import('/@/views/demo/charts/Pie.vue'),
           meta: {
             title: t('routes.demo.charts.pie'),
           },

src/views/demo/charts/map/AMap.vue

+<template>
+  <div ref="wrapRef" :style="{ height, width }"></div>
+</template>
+<script lang="ts">
+  import { defineComponent, ref, nextTick, unref, onMounted } from 'vue';
+
+  import { useScript } from '/@/hooks/web/useScript';
+
+  const A_MAP_URL = 'https://webapi.amap.com/maps?v=2.0&key=d7bb98e7185300250dd5f918c12f484b';
+
+  export default defineComponent({
+    name: 'AMap',
+    props: {
+      width: {
+        type: String,
+        default: '100%',
+      },
+      height: {
+        type: String,
+        default: 'calc(100vh - 78px)',
+      },
+    },
+    setup() {
+      const wrapRef = ref<HTMLDivElement | null>(null);
+      const { toPromise } = useScript({ src: A_MAP_URL });
+
+      async function initMap() {
+        await toPromise();
+        await nextTick();
+        const wrapEl = unref(wrapRef);
+        if (!wrapEl) return;
+        const AMap = (window as any).AMap;
+        new AMap.Map(wrapEl, {
+          zoom: 11,
+          center: [116.397428, 39.90923],
+          viewMode: '3D',
+        });
+      }
+
+      onMounted(() => {
+        initMap();
+      });
+
+      return { wrapRef };
+    },
+  });
+</script>

src/views/demo/charts/map/Baidu.vue

+<template>
+  <div ref="wrapRef" :style="{ height, width }"></div>
+</template>
+<script lang="ts">
+  import { defineComponent, ref, nextTick, unref, onMounted } from 'vue';
+
+  import { useScript } from '/@/hooks/web/useScript';
+
+  const BAI_DU_MAP_URL =
+    'https://api.map.baidu.com/getscript?v=3.0&ak=OaBvYmKX3pjF7YFUFeeBCeGdy9Zp7xB2&services=&t=20210201100830';
+  export default defineComponent({
+    name: 'BaiduMap',
+    props: {
+      width: {
+        type: String,
+        default: '100%',
+      },
+      height: {
+        type: String,
+        default: 'calc(100vh - 78px)',
+      },
+    },
+    setup() {
+      const wrapRef = ref<HTMLDivElement | null>(null);
+      const { toPromise } = useScript({ src: BAI_DU_MAP_URL });
+
+      async function initMap() {
+        await toPromise();
+        await nextTick();
+        const wrapEl = unref(wrapRef);
+        if (!wrapEl) return;
+        const BMap = (window as any).BMap;
+        const map = new BMap.Map(wrapEl);
+        const point = new BMap.Point(116.404, 39.915);
+        map.centerAndZoom(point, 15);
+        map.enableScrollWheelZoom(true);
+      }
+
+      onMounted(() => {
+        initMap();
+      });
+
+      return { wrapRef };
+    },
+  });
+</script>

src/views/demo/charts/map/Google.vue

+<template>
+  <div ref="wrapRef" :style="{ height, width }"></div>
+</template>
+<script lang="ts">
+  import { defineComponent, ref, nextTick, unref, onMounted } from 'vue';
+
+  import { useScript } from '/@/hooks/web/useScript';
+
+  const MAP_URL =
+    'https://maps.googleapis.com/maps/api/js?key=AIzaSyBQWrrGwj4gAzKndcbwD5favT9K0wgty_0&signed_in=true';
+
+  export default defineComponent({
+    name: 'GoogleMap',
+    props: {
+      width: {
+        type: String,
+        default: '100%',
+      },
+      height: {
+        type: String,
+        default: 'calc(100vh - 78px)',
+      },
+    },
+    setup() {
+      const wrapRef = ref<HTMLDivElement | null>(null);
+      const { toPromise } = useScript({ src: MAP_URL });
+
+      async function initMap() {
+        await toPromise();
+        await nextTick();
+        const wrapEl = unref(wrapRef);
+        if (!wrapEl) return;
+        const google = (window as any).google;
+        const latLng = { lat: 116.404, lng: 39.915 };
+        const map = new google.maps.Map(wrapEl, {
+          zoom: 4,
+          center: latLng,
+        });
+        new google.maps.Marker({
+          position: latLng,
+          map: map,
+          title: 'Hello World!',
+        });
+      }
+
+      onMounted(() => {
+        initMap();
+      });
+
+      return { wrapRef };
+    },
+  });
+</script>

vite.config.ts

@@ -5,14 +5,11 @@ import { resolve } from 'path';
 
 import { generateModifyVars } from './build/config/themeConfig';
 import { createProxy } from './build/vite/proxy';
+import { createAlias } from './build/vite/alias';
 import { wrapperEnv } from './build/utils';
 import { createVitePlugins } from './build/vite/plugin';
 import { OUTPUT_DIR } from './build/constant';
 
-function pathResolve(dir: string) {
-  return resolve(__dirname, '.', dir);
-}
-
 export default ({ command, mode }: ConfigEnv): UserConfig => {
   const root = process.cwd();
 
@@ -29,18 +26,12 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
     base: VITE_PUBLIC_PATH,
     root,
     resolve: {
-      alias: [
-        {
-          // /@/xxxx  =>  src/xxx
-          find: /^\/@\//,
-          replacement: pathResolve('src') + '/',
-        },
-        {
-          // /#/xxxx  =>  types/xxx
-          find: /^\/#\//,
-          replacement: pathResolve('types') + '/',
-        },
-      ],
+      alias: createAlias([
+        // /@/xxxx => src/xxxx
+        ['/@/', 'src'],
+        // /#/xxxx => types/xxxx
+        ['/#/', 'types'],
+      ]),
     },
     server: {
       port: VITE_PORT,
@@ -52,7 +43,7 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
     },
 
     build: {
-      // minify: 'esbuild',
+      minify: 'esbuild',
       outDir: OUTPUT_DIR,
       polyfillDynamicImport: VITE_LEGACY,
       terserOptions: {