👈 编写高德地图组件

kicc-ui/src/assets/images/hospital.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1653028867621" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3152" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M899.011 339H756v121h81v62h-81v73h81v64h-81v68h81v63h-81v98h203V401.868C959 367.139 932.688 339 899.011 339zM270 790h-82v-63h82v-68h-82v-64h82v-73h-82v-62h82V339H126.632C92.955 339 65 367.139 65 401.868V888h205v-98z" fill="#BDCCD4" p-id="3153"></path><path d="M756 789.646V125.883C756 91.154 727.684 63 692.955 63h-359.83C298.396 63 270 91.154 270 125.883V888H65v70h894v-70H756v-98.354zM401 192h77v-77h70v77h77v70h-77v76h-70v-76h-77v-70z m26 219h69v70h-69v-70z m173 70h-70v-70h70v70z m103 0h-70v-70h70v70z m-379-70h69v70h-69v-70z m103 139h69v70h-69v-70z m173 70h-70v-70h70v70z m103 0h-70v-70h70v70z m-379-70h69v70h-69v-70z m103 138h69v70h-69v-70z m173 70h-70v-70h70v70z m103 0h-70v-70h70v70z m-379-70h69v70h-69v-70z m69 199h-69v-69h69v69z m103 0h-69v-69h69v69z m104 0h-70v-69h70v69z m103 0h-70v-69h70v69z" fill="#F45656" p-id="3154"></path><path d="M324 411h69v70h-69zM427 411h69v70h-69zM530 411h70v70h-70zM633 411h70v70h-70zM324 550h69v70h-69zM427 550h69v70h-69zM530 550h70v70h-70zM633 550h70v70h-70zM324 688h69v70h-69zM427 688h69v70h-69zM530 688h70v70h-70zM633 688h70v70h-70zM324 818h69v69h-69zM427 818h69v69h-69zM530 818h70v69h-70zM633 818h70v69h-70z" fill="#BDCCD4" p-id="3155"></path></svg>

kicc-ui/src/components/AMap/src/Amap.vue

@@ -5,7 +5,7 @@
 import AMapLoader from '@amap/amap-jsapi-loader';
 import { reactive, getCurrentInstance, onBeforeMount, onUnmounted } from 'vue';
 import { mapList } from './data';
-import car from '/@/assets/car.png';
+import hospital from '/@/assets/images/hospital.svg';
 
 export interface MapConfigureInter {
   on: Fn;
@@ -41,7 +41,14 @@ const complete = (): void => {
 
 onBeforeMount(() => {
   if (!instance) return;
-  let { MapConfigure } = instance.appContext.config.globalProperties.$config;
+  const MapConfigure = {
+    amapKey: '97b3248d1553172e81f168cf94ea667e',
+    options: {
+      resizeEnable: true,
+      center: [113.6401, 34.72468],
+      zoom: 12
+    }
+  };
   let { options } = MapConfigure;
 
   AMapLoader.load({
@@ -70,10 +77,8 @@ onBeforeMount(() => {
         renderMarker(ctx) {
           let { marker, data } = ctx;
           if (Array.isArray(data) && data[0]) {
-            var { driver, plateNumber, orientation } = data[0];
-            var content = `<img style="transform: scale(1) rotate(${
-              360 - Number(orientation)
-            }deg);" src='${car}' />`;
+            const { driver, plateNumber, orientation } = data[0];
+            const content = `<img width="60px" height="60px" style="transform: scale(1) rotate(${360 - Number(orientation)}deg);" src='${hospital}' />`;
             marker.setContent(content);
             marker.setLabel({
               direction: 'bottom',
@@ -90,9 +95,8 @@ onBeforeMount(() => {
           }
         }
       });
-
       // 获取模拟车辆信息
-      const points = mapList().map((v: any) => ({
+      const points = mapList.map((v: any) => ({
         lnglat: [v.lng, v.lat],
         ...v
       }));

kicc-ui/src/components/AMap/src/data.ts

@@ -2,21 +2,19 @@
 type mapType = {
   plateNumber: string;
   driver: string;
-  'orientation|1-360': number;
-  'lng|113-114.1-10': number;
-  'lat|34-35.1-10': number;
+  orientation: number;
+  lng: number;
+  lat: number;
+  'orientation|1-360'?: number;
+  'lng|113-114.1-10'?: number;
+  'lat|34-35.1-10'?: number;
 };
 
-export const mapList = (): mapType[] => {
-  const result: mapType[] = [];
-  for (let index = 0; index < 200; index++) {
-    result.push({
-      plateNumber: '豫A@natural(11111, 99999)@character(\'upper\')',
-      driver: '@cname()',
-      'orientation|1-360': 100,
-      'lng|113-114.1-10': 1,
-      'lat|34-35.1-10': 1
-    });
-  }
-  return result;
-};
+export const mapList: mapType[] = [
+  {plateNumber: '豫A36523R', driver: '郑霞', orientation: 0, lng: 114.893657, lat: 35.289},
+  {plateNumber: '豫A76788W', driver: '苏娜', orientation: 0, lng: 114.71, lat: 34.5394614},
+  {plateNumber: '豫A90026H', driver: '马洋', orientation: 0, lng: 114.72888, lat: 35.4585},
+  {plateNumber: '豫A20644R', driver: '孙洋', orientation: 0, lng: 114.1722778, lat: 35.340310104},
+  {plateNumber: '豫A97973Y', driver: '朱丽', orientation: 0, lng: 113.72223, lat: 35.68455},
+  {plateNumber: '豫A76379B', driver: '蒋强', orientation: 0, lng: 114.379, lat: 34.36825}
+];

kicc-ui/src/router/constant.ts

@@ -16,5 +16,5 @@ export const EXCEPTION_COMPONENT = () => import('../views/core/exception/Excepti
 /** 默认布局 */
 export const LAYOUT = () => import('/@/layouts/default/index.vue');
 
-/** 定义一个空组件什么都没有只有一个组件名称充当父布局,不让没有组件的时候报找不到组件的错误 */
+/** 多级菜单父布局定义,定义一个空组件什么都没有只有一个组件名称充当父布局,不让没有组件的时候报找不到组件的错误 */
 export const getParentLayout = (_name?: string) => () => new Promise((resolve) => resolve({ name: PARENT_LAYOUT_NAME }));