增加map,修复地图样式

package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@vuemap/vue-amap": "^2.0.24",
+    "@vuemap/vue-amap-loca": "^2.0.6",
     "echarts": "^5.4.3",
     "echarts-gl": "^2.0.9",
     "naive-ui": "^2.36.0",

src/components/layout.vue

@@ -9,7 +9,6 @@
     <div class="layout-right">
       <slot name="right" />
     </div>
-    <div class="layout-bg" />
   </div>
 </template>
 
@@ -32,18 +31,9 @@
     width: calc(100% - 1370px - 1370px);
     height: 100%;
     z-index: 1;
-  }
-
-  &-bg {
-    position: absolute;
-    z-index: 0;
-    left: 50%;
-    top: 50%;
-    width: calc(100% - 1260px - 1260px);
-    height: 100%;
-    transform: translate(-50%, -50%);
     background: url(../assets/img/4.png) no-repeat top center;
     background-size: cover;
   }
+
 }
 </style>

src/components/map.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="mapContainer">
+    <el-amap
+      :center="center"
+      :zoom="zoom"
+      map-style="amap://styles/grey"
+      @init="_init"
+    />
+  </div>
+</template>
+
+<script setup lang='ts'>
+import { ElAmap } from '@vuemap/vue-amap'
+import { ref } from 'vue'
+withDefaults(defineProps<{
+        zoom?: number
+    }>(), {
+  zoom: 12
+})
+
+const center = ref([ 103.044313, 30.011438 ])
+let map = null
+function _init(e: any) {
+  const marker = new AMap.Marker({
+    position: center
+  })
+  e.add(marker)
+  map = e
+  console.log('map init: ', e)
+}
+</script>
+
+<style lang="scss" scoped>
+.mapContainer {
+  width: 100%;
+  height: 100%;
+  mask-image: radial-gradient(#000 80%, transparent 81%);
+}
+</style>

src/pages/main.ts

@@ -10,11 +10,8 @@ import 'virtual:svg-icons-register'
 import naive from '@/assets/native-plugin'
 
 initAMapApiLoader({
-  key: 'YOUR_KEY',
-  securityJsCode: 'securityJsCode' // 新版key需要配合安全密钥使用
-  // Loca:{
-  //  version: '2.0.0'
-  // } // 如果需要使用loca组件库，需要加载Loca
+  key: '0c5c83112cafefa77154769b4433c3df',
+  securityJsCode: '184c86be3bbd9a8a941bcaaf6b09c7cd' // 新版key需要配合安全密钥使用
 })
 
 const store = createPinia()

src/pages/views/home/components/HomePage.vue

@@ -60,7 +60,7 @@
       </div>
     </template>
     <template #center>
-      <div>111111</div>
+      <Maps />
     </template>
     <template #right>
       <div class="right">
@@ -293,6 +293,7 @@ import Box from '@/components/box.vue'
 import TankSeamlessScroll from 'tank-vue3-seamless-scroll'
 import { graphic } from 'echarts'
 import Echart from '@/components/chart.vue'
+import Maps from '@/components/map.vue'
 
 const datas = [
   {
@@ -925,7 +926,6 @@ function changeFn(id: number, item: any) {
 
 <style lang="scss" scoped>
 .left {
-  padding-right: 40px;
 
   &-top {
     &>div {
@@ -1009,7 +1009,6 @@ function changeFn(id: number, item: any) {
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
-  padding-left: 40px;
   white-space: nowrap;
   text-shadow: 1px 1px 5px rgba(0, 255, 255, 0.647058823529412);
 

src/vite-env.d.ts

@@ -11,3 +11,5 @@ declare module '*.vue' {
 }
 
 declare module 'tank-vue3-seamless-scroll'
+declare const AMap: Any
+declare const Loca: Any

vite.config.ts

@@ -67,9 +67,6 @@ export default ({ mode }) => {
           }
         }
       }
-    },
-    define: {
-      __VUE_OPTIONS_API__: false
     }
   })
 }