初始化代码

2025-09-03 18:05:48 +08:00
parent e5712b2e97
commit 4414fe517b
70 changed files with 2404 additions and 9 deletions
--- a/src/views/link/index.vue
+++ b/src/views/link/index.vue
@ -0,0 +1,65 @@
+<script setup>
+import {ref, onMounted} from 'vue'
+import Swiper from '@/components/swiper/index.vue'
+import Map from './map.vue'
+
+const currentPage = ref(1)
+
+onMounted(() => {})
+</script>
+
+<template>
+  <div class="page">
+    <div class="placeholder"></div>
+    <Swiper
+      id="one"
+      title="联系我们"
+      v-model="currentPage"
+      :sourceWidth="1200"
+      :sourceHeight="400"
+      :show-pagination="false"
+      :auto-play="false"
+      :showHover="false"
+    >
+      <template #default>
+        <div class="my-card flex j-s">
+          <div class="title">
+            <div class="label">燃谷科技（南京）有限公司</div>
+            <div class="label">电话：13222013393</div>
+            <div class="label">邮箱：company@rangutech.com</div>
+            <div class="label">地址：江苏省南京市鼓楼区万谷硅巷9F</div>
+          </div>
+          <div class="img">
+            <Map />
+          </div>
+        </div>
+      </template>
+    </Swiper>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.my-card {
+  width: 100%;
+  height: 100%;
+  padding-top: 20px;
+  .title {
+    text-align: left;
+    .label {
+      font-family: 'PingFang SC';
+      font-weight: 400;
+      font-size: 24px;
+      margin-bottom: 20px;
+    }
+    .label:nth-child(1) {
+      font-family: 'PingFang SC';
+      font-weight: 600;
+      font-size: 32px;
+    }
+  }
+  .img {
+    width: 500px;
+    height: 300px;
+  }
+}
+</style>
--- a/src/views/link/map.vue
+++ b/src/views/link/map.vue
@ -0,0 +1,63 @@
+<script setup>
+import {ref, onMounted} from 'vue'
+
+const map = ref(null)
+
+const center = [118.762616, 32.068811]
+
+/* 检测单个 key 能否真正初始化地图 */
+const tryKey = (key) =>
+  new Promise((AMapResolve, AMapReject) => {
+    // 如果之前已经加载过，先清掉
+    if (window.AMap) delete window.AMap
+    const script = document.createElement('script')
+    script.src = `https://webapi.amap.com/maps?v=2.0&key=${key}`
+    script.async = true
+    script.onload = () => {
+      try {
+        const mapInstance = new window.AMap.Map('map', {
+          viewMode: '2D',
+          zoom: 19,
+          center: [118.762616, 32.068811],
+        })
+        AMapResolve({AMap: window.AMap, mapInstance, key})
+      } catch (e) {
+        AMapReject(e)
+      }
+    }
+    script.onerror = AMapReject
+    document.head.appendChild(script)
+  })
+
+/* 顺序尝试，直到成功或全部失败 */
+const initMap = async () => {
+  for (const key of window.GD_KEYS) {
+    try {
+      const {mapInstance} = await tryKey(key)
+      map.value = mapInstance
+      console.log('✅ 成功使用 key:', key)
+      return
+    } catch {
+      console.warn('❌ key 无效:', key)
+    }
+  }
+  console.error('所有 key 均无法加载地图')
+}
+
+const mark = () => {
+  let marker = new AMap.Marker({
+    position: center,
+  })
+
+  map.value.add(marker)
+}
+
+onMounted(async () => {
+  await initMap()
+  mark()
+})
+</script>
+
+<template>
+  <div id="map" class="page"></div>
+</template>