From 3f02c215c54fde4c85bf13e92c2620553d5a1840 Mon Sep 17 00:00:00 2001
From: Soybean <honghuangdc@gmail.com>
Date: Wed, 10 Nov 2021 00:38:23 +0800
Subject: [PATCH] =?UTF-8?q?feat(projects):=20=E6=96=B0=E5=A2=9E=E8=85=BE?=
 =?UTF-8?q?=E8=AE=AF=E5=9C=B0=E5=9B=BE=E6=8F=92=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .eslintrc.js                                  |  3 ++-
 src/settings/constant.ts                      |  3 +++
 src/typings/tmap.d.ts                         |  1 +
 .../component/map/components/TencentMap.vue   | 27 +++++++++++++++++--
 src/views/component/map/index.vue             |  2 +-
 5 files changed, 32 insertions(+), 4 deletions(-)
 create mode 100644 src/typings/tmap.d.ts

diff --git a/.eslintrc.js b/.eslintrc.js
index 777f6895..efeea125 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -10,7 +10,8 @@ module.exports = {
     withDefaults: 'readonly',
     PROJECT_BUILD_TIME: 'readonly',
     AMap: 'readonly',
-    BMap: 'readonly'
+    BMap: 'readonly',
+    TMap: 'readonly'
   },
   parser: 'vue-eslint-parser',
   parserOptions: {
diff --git a/src/settings/constant.ts b/src/settings/constant.ts
index 01b4a20b..06a8be3c 100644
--- a/src/settings/constant.ts
+++ b/src/settings/constant.ts
@@ -3,3 +3,6 @@ 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';
+
+/** 腾讯地图sdk地址 */
+export const TENCENT_MAP_SDK_URL = 'https://map.qq.com/api/gljs?v=1.exp&key=A6DBZ-KXPLW-JKSRY-ONZF4-CPHY3-K6BL7';
diff --git a/src/typings/tmap.d.ts b/src/typings/tmap.d.ts
new file mode 100644
index 00000000..5b1bc80d
--- /dev/null
+++ b/src/typings/tmap.d.ts
@@ -0,0 +1 @@
+declare const TMap: any;
diff --git a/src/views/component/map/components/TencentMap.vue b/src/views/component/map/components/TencentMap.vue
index 78e9e7a2..348166b4 100644
--- a/src/views/component/map/components/TencentMap.vue
+++ b/src/views/component/map/components/TencentMap.vue
@@ -1,6 +1,29 @@
 <template>
-  <div>地图</div>
+  <div ref="domRef" class="w-full max-h-480px"></div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { useScriptTag } from '@vueuse/core';
+import { TENCENT_MAP_SDK_URL } from '@/settings';
+
+const { load } = useScriptTag(TENCENT_MAP_SDK_URL);
+
+const domRef = ref<HTMLDivElement | null>(null);
+
+async function renderBaiduMap() {
+  await load(true);
+  const map = new TMap.Map(domRef.value!, {
+    center: new TMap.LatLng(39.98412, 116.307484),
+    zoom: 11,
+    viewMode: '3D'
+  });
+
+  return map;
+}
+
+onMounted(() => {
+  renderBaiduMap();
+});
+</script>
 <style scoped></style>
diff --git a/src/views/component/map/index.vue b/src/views/component/map/index.vue
index f6af7d50..3b8a1aa9 100644
--- a/src/views/component/map/index.vue
+++ b/src/views/component/map/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="overflow-hidden">
     <n-card title="地图插件" class="h-full shadow-sm rounded-16px">
       <n-tabs type="line" class="flex-col-stretch h-full" pane-class="flex-1-hidden">
         <n-tab-pane v-for="item in maps" :key="item.id" :name="item.id" :tab="item.label">