+手机端弹框修改，加自动定位到点击地点

liuyg

2021-12-14 82d13f47adbf2e62de4e6e639e8aaaa2be83944d

 src/components/mobilemap/index.vue

@@ -1,40 +1,34 @@
/* eslint-disable camelcase */
<template>
  <!-- mobile -->
  <div id="mobile-viewer-container">
    <div
      v-show="popupFlag"
      id="mobile-modelPopup"
      style="
        width: 366px;
        height: 240px;
        background: url(/img/bg/nav-bg.jpeg) no-repeat;
        background-size: 100% 100%;
      "
    >
      <div class="mobile-header">
        <div class="mobile-logo">
          <img src="/img/navicon/map.png" alt="" />
        </div>
        <div class="mobile-title">明德楼</div>
        <div class="mobile-close">
          <img src="/img/navicon/close.png" alt="" />
        </div>
      </div>
      <div class="mobile-content">
        <div class="mobile-img"></div>
        <div class="mobile-meau"></div>
      </div>
    </div>

    <div id="mobile-map_popup_content"></div>

    <div
      ref="mobile-mapContentContent"
      v-show="popupWindow"
      id="mobile-map_content_content"
    >
      <div class="mobile-arc-bcg">
        <img src="/img/job/one.jpg" alt="" @click="once" />
      <div class="mobile-popup-imgs-heard">
        <img :src="url" alt="" />
        <el-image
          style="width: 100px; height: 100px"
          :src="url"
          id="mobileBigImgs"
          v-show="false"
          :preview-src-list="srcList"
        >
        </el-image>
        哈工大A10公寫总建筑面积30740平方米,于2001年采用货款方式高标准建造并投入使用。整个楼体共分十层,地上九层为公寫主体。公寓外观呈工字型,公寓内房司以A、B、C三个区域別分,与哈工大雄厚的工科底蕴遥相呼应,是哈尔滨工业大学学生公寫的标志性建筑
      </div>
      <div class="mobile-popup-control">
        <el-link icon="el-icon-picture-outline-round" @click="mobileOpenImgs"
          >图集</el-link
        >
        <el-divider direction="vertical"></el-divider>

        <el-link icon="el-icon-map-location">实景</el-link>
        <el-divider direction="vertical"></el-divider>
        <el-link icon="el-icon-aim">去这</el-link>
      </div>
    </div>
    <mobileLeftNav ref="mobileLeftNav"></mobileLeftNav>
@@ -50,6 +44,11 @@
  name: "mobilemapBox",
  data() {
    return {
      url: "/img/job/one.jpg",
      srcList: [
        "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
        "https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg",
      ],
      popupFlag: false,
      popupWindow: false,
    };
@@ -132,7 +131,6 @@
        },
      });
      that.$refs.mobileLeftNav.initialize(viewer);
      // console.log(DC, 45678);

      const popup = viewer.popup;

@@ -204,21 +202,28 @@
        // that.popupFlag = true
        that.popupWindow = true;

        console.log(e);

        viewer.scene.globe.depthTestAgainstTerrain = false;

        // console.log(document.getElementById("mobile-map_content_content"));
        console.log(e.position);

        // 定制化窗体
        var divForms = new DC.divForms(viewer, {
          domId: "div1",
        var divForms = new DC.mobileDivForms(viewer, {
          domId: "mobilePopup",
          title: "成教楼  ",
          className: "divForms-dom",
          className: "mobilePopup",
          content: document.getElementById("mobile-map_content_content"),
          position: [e.position],
        });

        viewer.zoomToPosition(
          new DC.Position(
            e.wgs84Position.lng,
            e.wgs84Position.lat - 0.016,
            2030,
            0,
            -45
          )
        );
        // popup.setWrapper('<div></div>')

        // popup.showAt(e.position, document.getElementById('modelPopup'))
@@ -231,15 +236,15 @@
      viewer.compass.enable = false;
      viewer.zoomController.enable = false;
      viewer.locationBar.enable = false;
      viewer.distanceLegend.enable = false;
      viewer.distanceLegend.enable = true;
    }

    DC.ready(initViewer);
  },
  methods: {
    once() {
      console.log(123);
      // console.log(global, 123456789);
    mobileOpenImgs() {
      let imgsDom = document.getElementById("mobileBigImgs");
      imgsDom.click();
    },
  },
};