From 82d13f47adbf2e62de4e6e639e8aaaa2be83944d Mon Sep 17 00:00:00 2001
From: liuyg <376836862@qq.com>
Date: Tue, 14 Dec 2021 15:20:05 +0800
Subject: [PATCH] +手机端弹框修改，加自动定位到点击地点
---
src/components/mobilemap/index.vue | 83 ++++++++++++++++++++++-------------------
1 files changed, 44 insertions(+), 39 deletions(-)
diff --git a/src/components/mobilemap/index.vue b/src/components/mobilemap/index.vue
index d6c01b2..637aae8 100644
--- a/src/components/mobilemap/index.vue
+++ b/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();
},
},
};
--
Gitblit v1.9.3