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

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>