up-

web/src/components/welcome/GDMap.vue

@@ -0,0 +1,119 @@
+<template>
+  <div class="GDMap">
+    <div class="btn" @click="btnX"> <i class="el-icon-arrow-left"></i> 返 回</div>
+    <div class="box">
+      <div id="myMap" />
+    </div>
+  </div>
+</template>
+
+<script>
+/* eslint-disable */
+export default {
+  name: "GDMap",
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      map: null,
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {
+    btnX(){
+    this.$emit('btnX')
+  },
+
+    initMap(info) {
+      window.onLoad = () => {
+        this.map = new AMap.Map("myMap", {
+          zoom: 18,
+          center: [info.x, info.y],
+          // viewMode: '3D'
+        });
+        const marker = new AMap.Marker({
+          position: [info.x, info.y], // 位置
+          label: {
+            offset: new AMap.Pixel(20, 20),
+            content: "点击打开高德地图",
+          },
+        });
+        marker.on("click", function (e) {
+          marker.markOnAMAP({
+            name: info.name2,
+            position: marker.getPosition(),
+          });
+        });
+
+        this.map.add(marker); // 添加到地图
+        AMap.plugin("AMap.ToolBar", () => {
+          // 异步加载插件
+          const toolbar = new AMap.ToolBar();
+          this.map.addControl(toolbar);
+        });
+      };
+
+      const url =
+        "https://webapi.amap.com/maps?v=1.4.15&key=93f7bfff72aa16305db5aee4f3fd6232&callback=onLoad";
+
+      const jsapi = document.createElement("script");
+
+      jsapi.src = url;
+
+      document.head.appendChild(jsapi);
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() { },
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+    
+  },
+  beforeCreate() { }, //生命周期 - 创建之前
+  beforeMount() { }, //生命周期 - 挂载之前
+  beforeUpdate() { }, //生命周期 - 更新之前
+  updated() { }, //生命周期 - 更新之后
+  beforeDestroy() { }, //生命周期 - 销毁之前
+  destroyed() { }, //生命周期 - 销毁完成
+  activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+  .btn{
+    display: flex;
+    align-items: center;
+    width: 100px;
+    height: 40px;
+    position: fixed;
+    top: 12px;
+    left: 5px;
+    background-color: rgba(0,0,0,.7);
+    border-radius: 20px;
+    z-index: 101;
+    i {
+      font-size: 20px;
+      margin-left: 10px;
+    }
+  }
+.GDMap {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 100;
+  background-color: rgba(0,0,0,1);
+  /deep/.amap-marker-label{
+    color: #3993f8;
+  }
+  #myMap {
+    font-size: 14px;
+    width: 100%;
+    height: 100vh;
+  }
+}
+</style>

web/src/components/welcome/mapMo.vue

@@ -1,58 +1,69 @@
 <template>
   <div class="mapMo">
+    <!-- 进页面提示2秒的div -->
+    <div class="titBox" :class="{ titBoxShow: titBoxShow }">
+      点进相应线路可进入实体展
+    </div>
+
     <Iframe :url="iframeUrl" :myIframe.sync="myIframe" />
     <img class="wbBac" src="../../assets/tabMo/mobile.jpg" alt="" />
-    <div class="box">
-      <div class="row row0" @click="$emit('toVr')"></div>
-      <div
-        class="row row1"
-        @click="skipIframe('http://www.4dmodel.com/SuperTwo/index.html?m=1257')"
-      ></div>
-      <div class="row row2" @click="toHideHot('C9Xzw4A682213')"></div>
-      <div
-        class="row row3"
-        @click="
-          skipIframe('https://www.4dkankan.com/spc.html?m=uqNseUZY9F&lang=zh')
-        "
-      ></div>
-      <div
-        class="row row4"
-        @click="
-          skipIframe('https://www.4dkankan.com/spc.html?m=rVuZY399SA&lang=zh')
-        "
-      ></div>
-      <div
-        class="row row5"
-        @click="skipIframe('https://www.4dmodel.com/SuperTwo/index.html?m=997')"
-      ></div>
-      <div class="row row6"></div>
-      <div
-        class="row row7"
-        @click="toHideHot('d1606C883465')"
-      ></div>
-      <div
-        class="row row8"
-        @click="
-          skipIframe('https://www.4dkankan.com/spc.html?m=9ZqmhsI1Iq&lang=zh')
-        "
-      ></div>
-      <div class="row row9" @click="toHideHot('SkJMnNI650604')"></div>
-      <div class="row row10" @click="toHideHot('LKkKYP679393')"></div>
-      <div class="row row11" @click="toHideHot('1jugHED669838')"></div>
+    <div class="box" @click="mapInfo = {}">
+      <div class="row row0" @click.stop="$emit('toVr')"></div>
+      <div class="row row1" @click.stop="toMapOrHot(1)"></div>
+      <div class="row row2" @click.stop="toMapOrHot(2)"></div>
+      <div class="row row3" @click.stop="toMapOrHot(3)"></div>
+      <div class="row row4" @click.stop="toMapOrHot(4)"></div>
+      <div class="row row5" @click.stop="toMapOrHot(5)"></div>
+      <div class="row row6" @click.stop="toMapOrHot(6)"></div>
+      <div class="row row7" @click.stop="toMapOrHot(7)"></div>
+      <div class="row row8" @click.stop="toMapOrHot(8)"></div>
+      <div class="row row9" @click.stop="toMapOrHot(9)"></div>
+      <div class="row row10" @click.stop="toMapOrHot(10)"></div>
+      <div class="row row11" @click.stop="toMapOrHot(11)"></div>
+    </div>
+
+    <!-- 点击线路之后从底部出来的盒子 -->
+    <div class="changeMapBox" :class="{ changeMapBoxShow: mapInfo.id }">
+      <h3>{{ mapInfo.name }}</h3>
+      <div>
+        <el-button size="small" type="danger" round @click="handlVR">线上展厅</el-button>
+        <el-button size="small" type="danger" round @click="handlMap">导航到此</el-button>
+        <el-button size="small" type="danger" round @click="mapInfo = {}">关 闭</el-button>
+      </div>
     </div>
+
+    <GDMap v-if="GDShow" ref="GDMapRef" @btnX='GDShow = false' />
+
   </div>
 </template>
 
 <script>
+import GDMap from './GDMap.vue'
 import Iframe from "@/components/iframe";
 export default {
   name: "mapMo",
-  components: { Iframe },
+  components: { Iframe, GDMap },
   data() {
     //这里存放数据
     return {
       iframeUrl: "",
       myIframe: false,
+      titBoxShow: false,
+      mapData: [
+        { id: 1, url: 'http://www.4dmodel.com/SuperTwo/index.html?m=1257', name: '金鼎党群服务中心', x: 113.541304625963, y: 22.3779173875064, name2: '珠海高新区党群服务中心' },
+        { id: 2, url: 'C9Xzw4A682213', name: '上栅村史馆', x: 113.537433595924, y: 22.386132300136, type: 'hot', name2: '上栅村史馆' },
+        { id: 3, url: 'https://www.4dkankan.com/spc.html?m=uqNseUZY9F&lang=zh', name: '淇澳广场', x: 113.643540745012, y: 22.4103205001735, name2: '淇澳抗英禁烟胜利广场' },
+        { id: 4, url: 'https://www.4dkankan.com/spc.html?m=rVuZY399SA&lang=zh', name: '淇澳村使馆', x: 113.647222051486, y: 22.4121524452728, name2: '淇澳村史馆' },
+        { id: 5, url: 'https://www.4dmodel.com/SuperTwo/index.html?m=997', name: '苏兆征故居陈列馆', x: 113.646546909711, y: 22.4119172454793, name2: '苏兆征故居陈列馆' },
+        { id: 6, url: '', name: '珠海市高新区唐家社区党群服务中心', x: 113.595520724211, y: 22.3535146619874, name2: '珠海市高新区唐家社区党群服务中心' },
+        { id: 7, url: 'd1606C883465', name: '望慈山房', x: 113.595110003973, y: 22.3580482099635, type: 'hot', name2: '望慈山房' },
+        { id: 8, url: 'https://www.4dkankan.com/spc.html?m=9ZqmhsI1Iq&lang=zh', name: '共乐园', x: 113.586345609932, y: 22.3650719025036, name2: '唐家湾廉洁文化园' },
+        { id: 9, url: 'SkJMnNI650604', name: '金山软件', x: 113.601295089331, y: 22.3485283808041, type: 'hot', name2: '金山软件园' },
+        { id: 10, url: 'LKkKYP679393', name: '世纪鼎利', x: 113.559413917409, y: 22.3901174798293, type: 'hot', name2: '世纪鼎利' },
+        { id: 11, url: '1jugHED669838', name: '派诺科技', x: 113.550441393189, y: 22.3890214990772, type: 'hot', name2: '派诺科技' },
+      ],
+      mapInfo: {},
+      GDShow: false
     };
   },
   //监听属性 类似于data概念
@@ -72,20 +83,46 @@ export default {
       setTimeout(() => {
         temp && temp.examine(window.player, true);
       }, 200);
-      console.log("----", temp);
     },
+
+
+    // 移动端点击之后出现的页面
+    toMapOrHot(id) {
+      this.mapInfo = this.mapData.find(v => v.id === id)
+      // let flag = this.mapInfo.type === 'hot'
+      // flag ? this.toHideHot(this.mapInfo.url) : this.skipIframe(this.mapInfo.url)
+    },
+    handlVR() {
+      let flag = this.mapInfo.type === 'hot'
+      let url = this.mapInfo.url
+      if(url==='') return alert('数据采集中')
+      flag ? this.toHideHot(url) : this.skipIframe(url)
+    },
+    handlMap() {
+      this.GDShow = true
+      setTimeout(() => {
+
+        console.log('------', this.$refs.GDMapRef);
+        this.$refs.GDMapRef.initMap(this.mapInfo)
+      }, 20);
+    }
+
   },
   //生命周期 - 创建完成（可以访问当前this实例）
-  created() {},
+  created() { },
   //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {},
-  beforeCreate() {}, //生命周期 - 创建之前
-  beforeMount() {}, //生命周期 - 挂载之前
-  beforeUpdate() {}, //生命周期 - 更新之前
-  updated() {}, //生命周期 - 更新之后
-  beforeDestroy() {}, //生命周期 - 销毁之前
-  destroyed() {}, //生命周期 - 销毁完成
-  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+  mounted() {
+    setTimeout(() => {
+      this.titBoxShow = true;
+    }, 2000);
+  },
+  beforeCreate() { }, //生命周期 - 创建之前
+  beforeMount() { }, //生命周期 - 挂载之前
+  beforeUpdate() { }, //生命周期 - 更新之前
+  updated() { }, //生命周期 - 更新之后
+  beforeDestroy() { }, //生命周期 - 销毁之前
+  destroyed() { }, //生命周期 - 销毁完成
+  activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
 };
 </script>
 <style lang='less' scoped>
@@ -93,6 +130,58 @@ export default {
   width: 100%;
   height: 100%;
   position: relative;
+
+  .changeMapBox {
+    position: absolute;
+    z-index: 99;
+    top: -100px;
+    height: 100px;
+    opacity: 0;
+    transition: all .3s;
+    width: 100%;
+    background-color: rgba(0, 0, 0, 0.6);
+    border-radius: 6px 6px 0 0;
+
+    h3 {
+      font-size: 18px;
+      color: #fff;
+      text-align: center;
+      margin: 10px 0;
+    }
+
+    &>div {
+      display: flex;
+      justify-content: center;
+      padding: 0 15px;
+    }
+  }
+
+  .changeMapBoxShow {
+    top: 0;
+    opacity: 1;
+  }
+
+  .titBox {
+    z-index: 99;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 80%;
+    text-align: center;
+    transform: translate(-50%, -50%);
+    background-color: rgba(0, 0, 0, 0.6);
+    border-radius: 6px;
+    padding: 20px;
+    color: #fff;
+    font-size: 14px;
+    transition: opacity 0.3s;
+  }
+
+  .titBoxShow {
+    opacity: 0;
+    pointer-events: none;
+  }
+
   .wbBac {
     pointer-events: none;
     position: absolute;
@@ -101,83 +190,97 @@ export default {
     width: 100%;
     height: 100%;
   }
+
   .box {
     width: 100%;
     height: 100%;
     position: absolute;
     top: 0;
     left: 0;
+
     .row {
       position: absolute;
       width: 30%;
       height: 10%;
     }
+
     .row0 {
       right: 6%;
       top: 43%;
       width: 23%;
       height: 12%;
     }
+
     .row1 {
       left: 14%;
       top: 57%;
       width: 39%;
       height: 7%;
     }
+
     .row2 {
       left: 62%;
       top: 57%;
       width: 32%;
       height: 7%;
     }
+
     .row3 {
       left: 14%;
       bottom: 27%;
       width: 20%;
       height: 6%;
     }
+
     .row4 {
       left: 40%;
       bottom: 27%;
       width: 20%;
       height: 6%;
     }
+
     .row5 {
       left: 62%;
       bottom: 27%;
       width: 26%;
       height: 6%;
     }
+
     .row6 {
       left: 14%;
       bottom: 17%;
       width: 21%;
       height: 6%;
     }
+
     .row7 {
       left: 40%;
       bottom: 17%;
       width: 20%;
       height: 6%;
     }
+
     .row8 {
       left: 62%;
       bottom: 17%;
       width: 27%;
       height: 6%;
     }
+
     .row9 {
       left: 16%;
       bottom: 7%;
       width: 18%;
       height: 6%;
     }
+
     .row10 {
       left: 40%;
       bottom: 7%;
       width: 18%;
       height: 6%;
     }
+
     .row11 {
       left: 62%;
       bottom: 7%;

web/src/components/welcome/mapPc.vue

@@ -241,7 +241,7 @@ export default {
       height: 5%;
       &:hover {
         &::before {
-          content: "世纪鼎利";
+          content: "派诺科技";
         }
       }
     }