新增地图

package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "license": "MIT",
       "dependencies": {
+        "@amap/amap-jsapi-loader": "^1.0.1",
         "@element-plus/icons-vue": "^2.0.6",
         "@highlightjs/vue-plugin": "^2.1.0",
         "@wangeditor/editor": "^5.1.12",
@@ -61,6 +62,11 @@
         "vue-tsc": "^0.38.1"
       }
     },
+    "node_modules/@amap/amap-jsapi-loader": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/@amap/amap-jsapi-loader/-/amap-jsapi-loader-1.0.1.tgz",
+      "integrity": "sha512-nPyLKt7Ow/ThHLkSvn2etQlUzqxmTVgK7bIgwdBRTg2HK5668oN7xVxkaiRe3YZEzGzfV2XgH5Jmu2T73ljejw=="
+    },
     "node_modules/@ampproject/remapping": {
       "version": "2.2.0",
       "resolved": "https://registry.npmmirror.com/@ampproject/remapping/-/remapping-2.2.0.tgz",

package.json

@@ -10,6 +10,7 @@
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
   },
   "dependencies": {
+    "@amap/amap-jsapi-loader": "^1.0.1",
     "@element-plus/icons-vue": "^2.0.6",
     "@highlightjs/vue-plugin": "^2.1.0",
     "@wangeditor/editor": "^5.1.12",

src/components/map/MapContainer.vue

@@ -0,0 +1,39 @@
+<template>
+  <div id="container"></div>
+</template>
+
+<script lang="ts" setup name="mapContainer">
+import AMapLoader from "@amap/amap-jsapi-loader";
+import { shallowRef } from "@vue/reactivity";
+
+const map = shallowRef(null);
+
+const initMap = () => {
+  AMapLoader.load({
+    key: "", // 申请好的Web端开发者Key，首次调用 load 时必填
+    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+    plugins: [""], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
+  })
+    .then((AMap) => {
+      map = new AMap.Map("container", {
+        //设置地图容器id
+        viewMode: "2D", //是否为3D地图模式
+        zoom: 5, //初始化地图级别
+        center: [105.602725, 37.076636], //初始化地图中心点位置
+      });
+    })
+    .catch((e) => {
+      console.log(e);
+    });
+};
+</script>
+
+
+<style lang="scss" scoped>
+#container {
+  padding: 0px;
+  margin: 0px;
+  width: 100%;
+  height: 800px;
+}
+</style>

yarn.lock

@@ -2,6 +2,11 @@
 # yarn lockfile v1
 
 
+"@amap/amap-jsapi-loader@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.npmmirror.com/@amap/amap-jsapi-loader/-/amap-jsapi-loader-1.0.1.tgz"
+  integrity sha512-nPyLKt7Ow/ThHLkSvn2etQlUzqxmTVgK7bIgwdBRTg2HK5668oN7xVxkaiRe3YZEzGzfV2XgH5Jmu2T73ljejw==
+
 "@ampproject/remapping@^2.1.0":
   version "2.2.0"
   resolved "https://registry.npmmirror.com/@ampproject/remapping/-/remapping-2.2.0.tgz"