From a75b50eca7c59a549d24f8292bf709b8e970c61f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?home=E5=AD=99?= <1162067978@qq.com>
Date: Sat, 28 Jun 2025 11:26:13 +0800
Subject: [PATCH] 1

---
 public/index.html              |  9 +++++++
 src/router/index.js            |  5 ++++
 src/views/page/largeScreen.vue | 49 ++++++++++++++++++++++++++++++----
 src/views/test.vue             | 30 +++++++++++++++++++++
 4 files changed, 88 insertions(+), 5 deletions(-)
 create mode 100644 src/views/test.vue
diff --git a/public/index.html b/public/index.html
index 936d92c9..306b2b4c 100644
--- a/public/index.html
+++ b/public/index.html
@@ -6,6 +6,15 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= htmlWebpackPlugin.options.title %></title>
+    <script
+    type="text/javascript"
+    src="https://webapi.amap.com/maps?v=2.0&key=6bb8457c7f0b7661c2e925c25ae53852&plugin=AMap.ElasticMarker"
+  ></script>
+  <script>
+    window._AMapSecurityConfig = {
+      securityJsCode: "68fc1cc8e2dd5d683ddc93ee7bbdd05d",
+    };
+  </script>
   </head>
   <body>
     <noscript>
diff --git a/src/router/index.js b/src/router/index.js
index 7c888e85..ca2ce2b0 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -13,6 +13,11 @@ const routes = [
     name: 'login',
     component: login,
   },
+  {
+    path: '/test',
+    name: 'test',
+    component: () => import('../views/test.vue')
+  },
   {
     path: '/home',
     name: 'home',
diff --git a/src/views/page/largeScreen.vue b/src/views/page/largeScreen.vue
index 186d4c3f..5d6ba297 100644
--- a/src/views/page/largeScreen.vue
+++ b/src/views/page/largeScreen.vue
@@ -229,7 +229,8 @@
               </div>
                <!-- 长兴前卫柑桔新优品种扩繁基地 -->
                  <div class="drag_box13" ref="drag_box13" v-show="limitUserId == 13">
-                <img class="drag_img" src="../../assets/img/map9.jpg" alt="" />
+                  <div class="map-13" id="map-13"></div>
+                <!-- <img class="drag_img" src="../../assets/img/map9.jpg" alt="" />
                 <img class="axis_shimen" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_5" />
                 <img class="axis_shimen1" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_5" />
                 <img class="axis_shimen2" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_5" />
@@ -243,7 +244,7 @@
                 <img class="axis_shimen10" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_5" />
                 <img class="axis_shimen11" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_5" />
                 <img class="axis_shimen12" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_5" />
-                <img class="axis_shimen13" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_5" />
+                <img class="axis_shimen13" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_5" /> -->
               </div>
             </div>
           </div>
@@ -1280,14 +1281,42 @@ export default {
             this.drag_boxHandler12();
             this.dataInit(userId, this.limitUserId);
           }else if (this.limitUserId == 13) {
-            this.drag_boxHandler13();
+            // this.drag_boxHandler13();
+            this.mapInit()
             this.dataInit(userId, this.limitUserId);
           }
 
         }
       });
     },
+mapInit(){
+  const map = new AMap.Map("map-13", {
+    zoom: 18,
+    center: [121.696506, 31.410799],
+  });
+  var  satelliteLayer = new AMap.TileLayer.Satellite();
+   var    roadNetLayer = new AMap.TileLayer.RoadNet();
+      //  map.setLayers([]); // 先清空现有图层
+      satelliteLayer.setMap(map); // 加载卫星图层
+      // roadNetLayer.setMap(map);  // 加载路网图层（覆盖在卫星图上）
 
+      // 添加标点
+      const iconUrl = require("@/assets/img/axis1.png");
+      const icon = new AMap.Icon({
+        image: iconUrl,
+size: new AMap.Size(70, 86), // 原始大小，如果不是原始大小，可以根据需要进行调整或忽略
+  imageSize: new AMap.Size(35, 43) // 设置实际显示的大小为35x43像素
+      });
+
+      const marker = new AMap.Marker({
+        position:new AMap.LngLat(121.696506, 31.410799),
+        icon: icon,
+        title: "上海前卫柑桔有限公司",
+         offset: new AMap.Pixel(-17.5, -40), //以 icon 的 [center bottom] 为原点
+      });
+
+      map.add(marker);
+},
     // autoPlay1() {
     //   this.autoPlay = false;
     //   clearInterval(this.timer_) && this.timer_;
@@ -1997,7 +2026,12 @@ window.open("http://localhost:8080/");
       }
     }
   }
-
+.amap-icon{
+  img{
+    width: 100%;
+    height: 100%;
+  }
+}
   .e_content1 {
     height: 100%;
 
@@ -2701,7 +2735,8 @@ window.open("http://localhost:8080/");
             }
             .drag_box13{
                width: 100%;
-              height: auto;
+              // height: auto;
+              height: 100%;
               position: absolute;
               // top: 0.3rem;
               // left: 0.5rem;
@@ -2718,6 +2753,10 @@ window.open("http://localhost:8080/");
                     blue 13%,
                     blue 73%,
                     transparent 97%);
+              }
+              .map-13{
+                width: 100%;
+                height: 100%;
               }
                 .axis_shimen {
                 width: 0.3rem;
diff --git a/src/views/test.vue b/src/views/test.vue
new file mode 100644
index 00000000..5a4a375b
--- /dev/null
+++ b/src/views/test.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="test">
+    <div class="map-container" id="map-container"></div>
+  </div>
+</template>
+<script>
+export default {
+  data(){
+      return {
+    
+      }
+  },
+  mounted(){
+        const map = new AMap.Map("map-container", {
+    zoom: 12,
+    center: [116.397428, 39.90923],
+  });
+  },
+  methods:{
+
+  },
+
+}
+</script>
+<style lang="scss">
+.map-container{
+    width: 100vw;
+    height: 100vh;
+}
+</style>
