feat(projects): 新增高德地图插件

.eslintrc.js

@@ -9,6 +9,7 @@ module.exports = {
     defineExpose: 'readonly',
     withDefaults: 'readonly',
     PROJECT_BUILD_TIME: 'readonly',
+    AMap: 'readonly',
     BMap: 'readonly'
   },
   parser: 'vue-eslint-parser',

package.json

@@ -35,6 +35,7 @@
     "wangeditor": "^4.7.9"
   },
   "devDependencies": {
+    "@amap/amap-jsapi-types": "^0.0.8",
     "@commitlint/cli": "^14.1.0",
     "@commitlint/config-conventional": "^14.1.0",
     "@iconify/json": "^1.1.425",

pnpm-lock.yaml

@@ -1,6 +1,7 @@
 lockfileVersion: 5.3
 
 specifiers:
+  '@amap/amap-jsapi-types': ^0.0.8
   '@antv/g2plot': ^2.3.39
   '@better-scroll/core': ^2.4.2
   '@commitlint/cli': ^14.1.0
@@ -74,6 +75,7 @@ dependencies:
   wangeditor: registry.npmmirror.com/wangeditor/4.7.9
 
 devDependencies:
+  '@amap/amap-jsapi-types': registry.npmmirror.com/@amap/amap-jsapi-types/0.0.8
   '@commitlint/cli': registry.npmmirror.com/@commitlint/cli/14.1.0
   '@commitlint/config-conventional': registry.npmmirror.com/@commitlint/config-conventional/14.1.0
   '@iconify/json': registry.npmmirror.com/@iconify/json/1.1.425
@@ -4498,6 +4500,12 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
+  registry.npmmirror.com/@amap/amap-jsapi-types/0.0.8:
+    resolution: {integrity: sha1-WoB+J/M/5Am+TI7L3nO4w1wctlA=, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@amap/amap-jsapi-types/download/@amap/amap-jsapi-types-0.0.8.tgz}
+    name: '@amap/amap-jsapi-types'
+    version: 0.0.8
+    dev: true
+
   registry.npmmirror.com/@antfu/install-pkg/0.1.0:
     resolution: {integrity: sha1-jYxhggy8MuXDfYLVFUha0+6b0FI=, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@antfu/install-pkg/download/@antfu/install-pkg-0.1.0.tgz}
     name: '@antfu/install-pkg'

src/settings/constant.ts

@@ -1,3 +1,5 @@
 /** 百度地图sdk地址 */
 export const BAIDU_MAP_SDK_URL =
   'https://api.map.baidu.com/getscript?v=3.0&ak=KSezYymXPth1DIGILRX3oYN9PxbOQQmU&services=&t=20210201100830&s=1';
+/** 高德地图sdk地址 */
+export const GAODE_MAP_SDK_URL = 'https://webapi.amap.com/maps?v=2.0&key=e7bd02bd504062087e6563daf4d6721d';

src/typings/amap.d.ts

@@ -0,0 +1 @@
+/// <reference types="@amap/amap-jsapi-types" />

src/views/component/map/components/GaodeMap.vue

@@ -1,6 +1,29 @@
 <template>
-  <div>地图</div>
+  <div ref="domRef" class="w-full h-full"></div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { useScriptTag } from '@vueuse/core';
+import { GAODE_MAP_SDK_URL } from '@/settings';
+
+const { load } = useScriptTag(GAODE_MAP_SDK_URL);
+
+const domRef = ref<HTMLDivElement | null>(null);
+
+async function renderBaiduMap() {
+  await load(true);
+  const map = new AMap.Map(domRef.value!, {
+    zoom: 11,
+    center: [114.05834626586915, 22.546789983033168],
+    viewMode: '3D'
+  });
+
+  return map;
+}
+
+onMounted(() => {
+  renderBaiduMap();
+});
+</script>
 <style scoped></style>