feat(components): 增加百度地图，高德地图功能

mock/module/user.ts

@@ -234,6 +234,45 @@ const userRoutes = [
       },
     ],
   },
+  {
+    name: 'error',
+    path: '/error',
+    redirect: '/error/not-found',
+    meta: {
+      title: '异常页',
+      requiresAuth: true,
+      icon: 'icon-park-outline:error-computer',
+    },
+    children: [
+      {
+        name: 'not-found',
+        path: '/error/not-found',
+        meta: {
+          title: '404页',
+          requiresAuth: true,
+          icon: 'icon-park-outline:error',
+        },
+      },
+      {
+        name: 'not-permission',
+        path: '/error/not-permission',
+        meta: {
+          title: '403页',
+          requiresAuth: true,
+          icon: 'carbon:error',
+        },
+      },
+      {
+        name: 'service-error',
+        path: '/error/service-error',
+        meta: {
+          title: '500页',
+          requiresAuth: true,
+          icon: 'carbon:data-error',
+        },
+      },
+    ],
+  },
   {
     name: 'about',
     path: '/about',

package.json

@@ -24,6 +24,7 @@
     "./src/**/*.{js,jsx,ts,tsx,less,json}": "prettier --loglevel warn --write"
   },
   "dependencies": {
+    "@vueuse/core": "^9.3.0",
     "@wangeditor/editor": "^5.1.21",
     "@wangeditor/editor-for-vue": "^5.1.12",
     "axios": "^0.27.2",

src/config/index.ts

@@ -0,0 +1 @@
+export * from './sdk';

src/config/sdk.ts

@@ -0,0 +1,5 @@
+/* 高德地图开发SDk */
+export const GAODE_MAP_SDK_URL = 'https://webapi.amap.com/maps?v=2.0&key=85e62187c6f8e51c797c87b1f36f787a';
+/* 百度地图开发SDk */
+export const BAIDU_MAP_SDK_URL =
+  'https://api.map.baidu.com/getscript?v=3.0&ak=MwqQwPxa5ipusyNmH1WT62y5DKhYxIgb&services=&t=20220816154130';

src/router/routes/index.ts

@@ -19,8 +19,8 @@ export const routes: RouteRecordRaw[] = [
         },
       },
       {
-        path: '/no-permission',
-        name: 'no-permission',
+        path: '/not-permission',
+        name: 'not-permission',
         component: () => import('@/views/error/not-permission/index.vue'),
         meta: {
           title: '用户无权限',

src/store/modules/tab.ts

@@ -23,7 +23,7 @@ export const useTabStore = defineStore('tab-store', {
         },
       ],
       tabs: [],
-      tabWhiteList: ['not-found', 'no-permission', 'service-error', 'login'],
+      tabWhiteList: ['not-found', 'not-permission', 'service-error', 'login'],
       currentTab: 'dashboard_workbench',
     };
   },

src/typings/global.d.ts

@@ -4,3 +4,6 @@ interface Window {
   $message?: import('naive-ui').MessageApiInjection;
   $notification?: import('naive-ui').NotificationApiInjection;
 }
+
+declare const AMap: any;
+declare const BMap: any;

src/views/plugin/map/components/AMap.vue

@@ -0,0 +1,31 @@
+<template>
+  <div ref="domRef" class="w-full h-full"></div>
+</template>
+
+<script setup lang="ts">
+import { useScriptTag } from '@vueuse/core';
+import { onMounted, ref } from 'vue';
+import { GAODE_MAP_SDK_URL } from '@/config';
+
+const { load } = useScriptTag(GAODE_MAP_SDK_URL);
+/* https://lbs.amap.com/api/jsapi-v2/summary 高德地图开发文档 */
+
+onMounted(() => {
+  initMap();
+});
+
+const domRef = ref<HTMLDivElement>();
+let map = null;
+
+async function initMap() {
+  await load();
+  if (!domRef.value) return;
+  map = new AMap.Map(domRef.value, {
+    zoom: 15,
+    center: [117.19, 31.84],
+    viewMode: '3D',
+  });
+}
+</script>
+
+<style scoped></style>

src/views/plugin/map/components/BMap.vue

@@ -0,0 +1,30 @@
+<template>
+  <div ref="domRef" class="w-full h-full"></div>
+</template>
+
+<script setup lang="ts">
+import { useScriptTag } from '@vueuse/core';
+import { onMounted, ref } from 'vue';
+import { BAIDU_MAP_SDK_URL } from '@/config';
+
+const { load } = useScriptTag(BAIDU_MAP_SDK_URL);
+/* https://lbsyun.baidu.com/index.php?title=jspopular3.0 百度地图开发者文档 */
+
+onMounted(() => {
+  initMap();
+});
+
+const domRef = ref<HTMLDivElement>();
+let map = null;
+
+async function initMap() {
+  await load();
+  if (!domRef.value) return;
+  map = new BMap.Map(domRef.value);
+  const point = new BMap.Point(117.19, 31.84);
+  map.centerAndZoom(point, 15);
+  map.enableScrollWheelZoom();
+}
+</script>
+
+<style scoped></style>

src/views/plugin/map/index.vue

@@ -1,7 +1,29 @@
 <template>
-  <div>地图示例</div>
+  <n-card title="地图示例">
+    <n-tabs type="line" animated>
+      <n-tab-pane v-for="item in maps" :key="item.id" :name="item.id" :tab="item.label" class="h-600px">
+        <component :is="item.component" />
+      </n-tab-pane>
+    </n-tabs>
+  </n-card>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import AMap from './components/AMap.vue';
+import BMap from './components/BMap.vue';
+
+const maps = [
+  {
+    id: 'AMap',
+    label: '高德地图',
+    component: AMap,
+  },
+  {
+    id: 'BMap',
+    label: '百度地图',
+    component: BMap,
+  },
+];
+</script>
 
 <style scoped></style>