更新代码

src/views/link/index.vue

@@ -1,6 +1,7 @@
 <script setup>
 import {ref, onMounted} from 'vue'
-import Swiper from '@/components/swiper/index.vue'
+import Swiper from '@/components/Swiper/index.vue'
+import Banner from '@/components/Banner/index.vue'
 import Map from './map.vue'
 
 const currentPage = ref(1)
@@ -10,7 +11,7 @@ onMounted(() => {})
 
 <template>
   <div class="page">
-    <div class="placeholder"></div>
+    <Banner class="banner" img="banner/link.png" />
     <Swiper
       id="one"
       title="联系我们"
@@ -39,6 +40,12 @@ onMounted(() => {})
 </template>
 
 <style lang="scss" scoped>
+.placeholder {
+  background-image: url(`./static/logo/link.png`);
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+}
+
 .my-card {
   width: 100%;
   height: 100%;
@@ -48,13 +55,13 @@ onMounted(() => {})
     .label {
       font-family: 'PingFang SC';
       font-weight: 400;
-      font-size: 24px;
+      font-size: 20px;
       margin-bottom: 20px;
     }
     .label:nth-child(1) {
       font-family: 'PingFang SC';
       font-weight: 600;
-      font-size: 32px;
+      font-size: 26px;
     }
   }
   .img {

src/views/link/map.vue

@@ -18,7 +18,9 @@ const tryKey = (key) =>
         const mapInstance = new window.AMap.Map('map', {
           viewMode: '2D',
           zoom: 19,
-          center: [118.762616, 32.068811],
+          center: center,
+          zoomEnable: false,
+          dragEnable: false,
         })
         AMapResolve({AMap: window.AMap, mapInstance, key})
       } catch (e) {
@@ -35,23 +37,46 @@ const initMap = async () => {
     try {
       const {mapInstance} = await tryKey(key)
       map.value = mapInstance
-      console.log('✅ 成功使用 key:', key)
+      console.log('✅ 成功使用')
       return
     } catch {
-      console.warn('❌ key 无效:', key)
+      console.warn('❌ key 无效:')
     }
   }
-  console.error('所有 key 均无法加载地图')
 }
 
 const mark = () => {
+  var icon = new AMap.Icon({
+    size: new AMap.Size(16, 16),
+    image: './static/images/main/map.png',
+    imageOffset: new AMap.Pixel(0, 0), // 设置偏移量
+    imageSize: new AMap.Size(16, 16),
+  })
   let marker = new AMap.Marker({
     position: center,
+    offset: new AMap.Pixel(50, -100),
+    icon: icon,
+    label: {
+      content: '燃谷科技（南京）有限公司',
+      offset: new AMap.Pixel(-13, -20),
+    },
   })
 
   map.value.add(marker)
 }
 
+const toGDMap = () => {
+  let query = {
+    query: '万谷硅巷',
+    city: '320100',
+    geoobj: '118.757114|32.066745|118.768038|32.071509',
+    zoom: '17.5',
+  }
+  window.open(
+    `https://ditu.amap.com/search?query=${query.query}&city=${query.city}&geoobj=${query.geoobj}&zoom=${query.zoom}`
+  )
+}
+
 onMounted(async () => {
   await initMap()
   mark()
@@ -59,5 +84,5 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div id="map" class="page"></div>
+  <div id="map" class="page" @click="toGDMap"></div>
 </template>