Hooke / map-demo

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
eb9362e8 1 parent aaaf152f

弹出框详情样式调整

Inline Side-by-side
Showing 2 changed files with 198 additions and 93 deletions
1 <template> 1 <template>
2 <div style="position: relative;"> 2 <div style="position: relative;">
3 <div class="info-window-wrapper"> 3 <div class="info-window-wrapper">
4 - <div class="t-popup-content"> 4 + <div :style="{ width: (widow_info.width * 0.8) + 'px', overflow: 'auto' }">
5 - <div class="popup-content" style="height: 13.5rem;"> 5 + <div style="color: #AB8F57; font-size: 1.5rem; margin-bottom: 0.5rem;">三宝楼</div>
6 - <div style="position: relative;"> 6 + <div>
7 - <h3 class="view-name">三宝楼</h3> 7 + <div class="info-text van-multi-ellipsis--l3">
8 - <van-icon @click="close" name="cross" size="1.25rem" 8 + 大雄宝殿是寺院的中心建筑，兴建于清末民初时期。重檐歇山，面阔七楹，飞檐翘角，气势雄伟，风格挺秀。梁枋均施苏式彩绘，典雅富丽，绚丽夺目。
9 - style="position: absolute; right: 0.75rem; top: 0.75rem;" /> 9 +
10 - </div> 10 + 大殿二重檐下，悬“大雄宝殿”四个遒劲有力的金字，气势雄浑，据说这四个字是陆润庠所提。陆润庠是苏州历史上第五十五位，也是最后一位状元，官至一品、大学士(即宰相级别)。大雄宝殿是佛教寺院中供奉佛像的正殿，是整座寺院的核心建筑，也是僧众朝暮集中修持的地方。因释迦牟尼佛德号“大雄”，所以称大雄宝殿。为什么叫大雄？大者，是包含万有的意思；雄者，是摄伏群魔的意思。释迦牟尼佛具足圆觉智慧，能雄镇大千世界，降伏四魔（烦恼魔、阴魔、死魔、自在天魔），因此尊称佛陀为大雄。
11 - <img class="view-photo" 11 +
12 - src="https://img0.baidu.com/it/u=3974116483,397969091&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=496"> 12 + 檐枋悬有三块匾额，中门之上为“西乾应迹”匾额。西者西方，乾者天也，西乾即是指佛教的发源地古印度，因当时地处中国的西方而得名，相应地，中国则被称为东土。应迹谓应化垂迹，即佛、菩萨应众生之机缘而将其本体示现种种身以济度众生。
13 - <p class="introduction" style="padding: 0.5rem; padding-bottom: 0;">尊敬的游客朋友们您好，欢迎来到西园寺，您现在所到的地方是“三宝楼......</p>
14 - <div v-if="!is_play" @click="play()" class="control-play" style="text-align: center;">
15 - <van-icon name="play-circle-o" size="2rem" color="#FFF" style="margin-top: 0.5rem;" />
16 - </div>
17 - <div v-else @click="pause()" class="control-play" style="text-align: center;">
18 - <van-icon name="pause-circle-o" size="2rem" color="#FFF" style="margin-top: 0.5rem;" />
19 </div> 13 </div>
20 - <div @click="showDetail" class="show-details" style="color: white; text-align: center; line-height: 3rem;">详情 14 + <div class="info-control">
15 + <div v-if="!is_play" @click="play()" class="control-play">
16 + <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E6%92%AD%E6%94%BE%E6%9A%82%E5%81%9C@2x.png" size="3rem"
17 + color="#FFF" style="margin-top: 0.5rem;" />
18 + </div>
19 + <div v-else @click="pause()" class="control-play" style="text-align: center;">
20 + <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E6%92%AD%E6%94%BE@2x.png" size="3rem" color="#FFF"
21 + style="margin-top: 0.5rem;" />
22 + </div>
23 + <div>{{ play_time }}</div>
21 </div> 24 </div>
22 </div> 25 </div>
23 </div> 26 </div>
27 + <div class="van-hairline--top" style="margin: 1rem 0;">
28 + <div style="width: 50%; float: left; text-align: center; margin-top: 1rem;" class="van-hairline--right">
29 + <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E5%89%8D%E5%BE%80@2x.png" size="1.5rem" color="#FFF"
30 + style="vertical-align: bottom;" />&nbsp;
31 + <span style="color: #AB8F57; font-size: 1.1rem;">详情</span>
32 + </div>
33 + <div style="width: 50%; float: left; text-align: center; margin-top: 1rem;">
34 + <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E5%89%8D%E5%BE%80@2x.png" size="1.5rem" color="#FFF"
35 + style="vertical-align: bottom;" />&nbsp;
36 + <span style="color: #AB8F57; font-size: 1.1rem;">前往</span>
37 + </div>
38 + </div>
24 </div> 39 </div>
25 <div class="leaflet-popup-tip-container" style="left: 50%; position: relative;"> 40 <div class="leaflet-popup-tip-container" style="left: 50%; position: relative;">
26 <div class="leaflet-popup-tip"></div> 41 <div class="leaflet-popup-tip"></div>
...@@ -54,6 +69,35 @@ export default { ...@@ -54,6 +69,35 @@ export default {
54 title: { 69 title: {
55 type: String, 70 type: String,
56 default: '' 71 default: ''
72 + },
73 + rect: {
74 + type: Object,
75 + default: () => { }
76 + },
77 + },
78 + mounted() {
79 +
80 + },
81 + watch: {
82 + rect(val) {
83 + this.widow_info = val;
84 + },
85 + infoWindow(val) {
86 + if (val) {
87 + // 加载录音
88 + this.audio.src = 'https://file.365daoyou.cn/mimi-001_1505799708494-k3xkyzv8';
89 + let play_status = this.audio.play() // 播放
90 + if (play_status) {
91 + play_status.then(() => {
92 + // 音频的播放需要耗时
93 + this.audio.pause();
94 + this.play_time = this.getAudioTime(this.audio.duration)
95 + }).catch((e) => {
96 + // 失败
97 + console.log('Operation is too fast, audio play fails')
98 + })
99 + }
100 + }
57 } 101 }
58 }, 102 },
59 data() { 103 data() {
...@@ -64,10 +108,36 @@ export default { ...@@ -64,10 +108,36 @@ export default {
64 video_src: '', 108 video_src: '',
65 ind: '', 109 ind: '',
66 is_play: false, 110 is_play: false,
67 - audio: new Audio() 111 + audio: new Audio(),
112 + widow_info: {},
113 + play_time: '00:00'
68 } 114 }
69 }, 115 },
70 methods: { 116 methods: {
117 + getAudioTime (audio) {
118 + let time = Math.floor(audio);
119 + var minute = time / 60;
120 + var minutes = parseInt(minute);
121 + if (minutes < 10) {
122 + minutes = "0" + minutes;
123 + }
124 + //秒
125 + var second = time % 60;
126 + var seconds = Math.round(second);
127 + if (seconds < 10) {
128 + seconds = "0" + seconds;
129 + }
130 + return `${minutes}:${second}`;
131 + },
132 + calculateCurrentValue(currentTime) {
133 + var current_hour = parseInt(currentTime / 3600) % 24,
134 + current_minute = parseInt(currentTime / 60) % 60,
135 + current_seconds_long = currentTime % 60,
136 + current_seconds = current_seconds_long.toFixed(),
137 + current_time = (current_minute < 10 ? "0" + current_minute : current_minute) + ":" + (current_seconds < 10 ? "0" + current_seconds : current_seconds);
138 +
139 + return current_time;
140 + },
71 // 关闭 141 // 关闭
72 close() { 142 close() {
73 // 高德地图信息窗关闭的api 143 // 高德地图信息窗关闭的api
...@@ -82,17 +152,16 @@ export default { ...@@ -82,17 +152,16 @@ export default {
82 this.popup_content = '尊敬的游客朋友们您好，欢迎来到西园寺，您现在所到的地方是“三宝楼......'; 152 this.popup_content = '尊敬的游客朋友们您好，欢迎来到西园寺，您现在所到的地方是“三宝楼......';
83 this.video_src = 'https://video.pearvideo.com/mp4/short/20200209/cont-1650197-14888002-hd.mp4' 153 this.video_src = 'https://video.pearvideo.com/mp4/short/20200209/cont-1650197-14888002-hd.mp4'
84 }, 154 },
85 - play () { 155 + play() {
86 this.voice_play('https://file.365daoyou.cn/mimi-001_1505799708494-k3xkyzv8', 0) 156 this.voice_play('https://file.365daoyou.cn/mimi-001_1505799708494-k3xkyzv8', 0)
87 }, 157 },
88 - pause () { 158 + pause() {
89 this.voice_pause() 159 this.voice_pause()
90 }, 160 },
91 // 声音播放 161 // 声音播放
92 voice_play(src, index) { 162 voice_play(src, index) {
93 this.audio.src = src 163 this.audio.src = src
94 if (this.ind) { 164 if (this.ind) {
95 - // audio.pause(); //暂停
96 this.audio.currentTime = 0 165 this.audio.currentTime = 0
97 this.ind = 0 166 this.ind = 0
98 return 167 return
...@@ -103,18 +172,21 @@ export default { ...@@ -103,18 +172,21 @@ export default {
103 this.is_play = true; 172 this.is_play = true;
104 play_status.then(() => { 173 play_status.then(() => {
105 // 音频加载成功 174 // 音频加载成功
106 - // 音频的播放需要耗时
107 - console.log(this.audio.duration)
108 setTimeout(() => { // 后续操作(同为播放完成) 175 setTimeout(() => { // 后续操作(同为播放完成)
109 this.ind = 0 176 this.ind = 0
110 }, this.audio.duration * 1000) // audio.duration 为音频的时长单位为秒 177 }, this.audio.duration * 1000) // audio.duration 为音频的时长单位为秒
178 + setInterval(() => {
179 + this.play_time = this.calculateCurrentValue(this.audio.duration - this.audio.currentTime)
180 + }, 1000);
111 }).catch((e) => { 181 }).catch((e) => {
112 // 失败 182 // 失败
113 console.log('Operation is too fast, audio play fails') 183 console.log('Operation is too fast, audio play fails')
114 }) 184 })
185 +
186 +
115 } 187 }
116 }, 188 },
117 - voice_pause () { 189 + voice_pause() {
118 this.audio.pause(); 190 this.audio.pause();
119 this.is_play = false; 191 this.is_play = false;
120 } 192 }
...@@ -129,79 +201,103 @@ export default { ...@@ -129,79 +201,103 @@ export default {
129 -webkit-box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4); 201 -webkit-box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
130 box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4); 202 box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
131 text-align: left; 203 text-align: left;
132 - border-radius: 12px; 204 + border-radius: 5px;
133 - padding: 0; 205 + padding: 1rem 1.25rem;
134 - 206 + overflow: auto;
135 - .t-popup-content {
136 - position: relative;
137 - width: 25rem;
138 - padding: 0;
139 - margin: 0;
140 - border-radius: 0.1rem;
141 - background: rgba(255, 255, 255, 0.9);
142 - -webkit-box-shadow: 0 0.02rem 0.05rem 0 rgba(0, 0, 0, 0.1);
143 - box-shadow: 0 0.02rem 0.05rem 0 rgba(0, 0, 0, 0.1);
144 - line-height: 1.4;
145 -
146 - .view-name {
147 - margin: 0;
148 - padding: 0.5rem;
149 - width: 25rem;
150 - height: 2.5rem;
151 - font-size: 1.2rem;
152 - text-indent: 0.2rem;
153 - white-space: nowrap;
154 - text-overflow: ellipsis;
155 - color: #5b5b5b;
156 - -webkit-box-sizing: border-box;
157 - box-sizing: border-box;
158 - border-bottom: solid 1px #e8e8e8;
159 - border-radius: 0.1rem 0.1rem 0 0;
160 - background: #f7f7f7;
161 - overflow: hidden;
162 - }
163 207
164 - .view-photo { 208 + .info-text {
165 - display: block; 209 + width: 80%;
166 - float: left; 210 + line-height: 1.5;
167 - margin: 0.5rem; 211 + float: left;
168 - height: 100%; 212 + color: #7A6C6C;
169 - width: 9rem; 213 + }
170 - height: 9rem;
171 - border-radius: 3px;
172 - }
173 214
174 - .introduction { 215 + .info-control {
175 - float: left; 216 + width: 20%;
176 - margin: 0.2rem 0; 217 + float: left;
177 - width: 13.5rem; 218 + text-align: center;
178 - height: 6.75rem; 219 + color: #AB8F57;
179 - font-size: 0.9rem;
180 - color: #202020;
181 - overflow: hidden;
182 - }
183 220
184 .control-play { 221 .control-play {
185 - display: block; 222 + text-align: center;
186 - float: left; 223 + margin-bottom: 0.5rem;
187 - margin-right: 0.5rem;
188 - width: 7rem;
189 - height: 3rem;
190 - border-radius: 2px;
191 - background: #ffdd02 center no-repeat;
192 - background-size: 6.5rem 3rem;
193 - }
194 224
195 - .show-details { 225 + i {
196 - display: block; 226 + margin-top: 0 !important;
197 - float: left; 227 + }
198 - width: 7rem;
199 - height: 3rem;
200 - border-radius: 2px;
201 - background: #9196a9 center no-repeat;
202 - background-size: 6.5rem 3rem;
203 } 228 }
204 } 229 }
230 +
231 + // .t-popup-content {
232 + // position: relative;
233 + // width: 25rem;
234 + // padding: 0;
235 + // margin: 0;
236 + // border-radius: 0.1rem;
237 + // background: rgba(255, 255, 255, 0.9);
238 + // -webkit-box-shadow: 0 0.02rem 0.05rem 0 rgba(0, 0, 0, 0.1);
239 + // box-shadow: 0 0.02rem 0.05rem 0 rgba(0, 0, 0, 0.1);
240 + // line-height: 1.4;
241 +
242 + // .view-name {
243 + // margin: 0;
244 + // padding: 0.5rem;
245 + // width: 25rem;
246 + // height: 2.5rem;
247 + // font-size: 1.2rem;
248 + // text-indent: 0.2rem;
249 + // white-space: nowrap;
250 + // text-overflow: ellipsis;
251 + // color: #5b5b5b;
252 + // -webkit-box-sizing: border-box;
253 + // box-sizing: border-box;
254 + // border-bottom: solid 1px #e8e8e8;
255 + // border-radius: 0.1rem 0.1rem 0 0;
256 + // background: #f7f7f7;
257 + // overflow: hidden;
258 + // }
259 +
260 + // .view-photo {
261 + // display: block;
262 + // float: left;
263 + // margin: 0.5rem;
264 + // height: 100%;
265 + // width: 9rem;
266 + // height: 9rem;
267 + // border-radius: 3px;
268 + // }
269 +
270 + // .introduction {
271 + // float: left;
272 + // margin: 0.2rem 0;
273 + // width: 13.5rem;
274 + // height: 6.75rem;
275 + // font-size: 0.9rem;
276 + // color: #202020;
277 + // overflow: hidden;
278 + // }
279 +
280 + // // .control-play {
281 + // // display: block;
282 + // // float: left;
283 + // // margin-right: 0.5rem;
284 + // // width: 7rem;
285 + // // height: 3rem;
286 + // // border-radius: 2px;
287 + // // background: #ffdd02 center no-repeat;
288 + // // background-size: 6.5rem 3rem;
289 + // // }
290 +
291 + // .show-details {
292 + // display: block;
293 + // float: left;
294 + // width: 7rem;
295 + // height: 3rem;
296 + // border-radius: 2px;
297 + // background: #9196a9 center no-repeat;
298 + // background-size: 6.5rem 3rem;
299 + // }
300 + // }
205 } 301 }
206 302
207 .leaflet-popup-tip-container { 303 .leaflet-popup-tip-container {
......
1 <!-- 1 <!--
2 * @Date: 2023-05-19 14:54:27 2 * @Date: 2023-05-19 14:54:27
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2023-06-02 17:37:17 4 + * @LastEditTime: 2023-06-05 11:38:09
5 * @FilePath: /map-demo/src/views/index.vue 5 * @FilePath: /map-demo/src/views/index.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
8 <template> 8 <template>
9 - <div style="height: 100vh; position: relative; overflow: hidden;"> 9 + <div ref="root" style="height: 100vh; position: relative; overflow: hidden;">
10 <div id="container"></div> 10 <div id="container"></div>
11 <div class="nav-bar-wrapper"> 11 <div class="nav-bar-wrapper">
12 <div class="hideScrollBar" 12 <div class="hideScrollBar"
...@@ -92,7 +92,7 @@ ...@@ -92,7 +92,7 @@
92 92
93 <!-- 自定义组件InfoWindow，初始时需要隐藏 --> 93 <!-- 自定义组件InfoWindow，初始时需要隐藏 -->
94 <!-- 隐藏不要使用v-if，因为我们需要渲染完成后的原生html结构作为信息框的dom对象使用 --> 94 <!-- 隐藏不要使用v-if，因为我们需要渲染完成后的原生html结构作为信息框的dom对象使用 -->
95 - <InfoWindow v-show="showInfoWindow" ref="infoWindow" :info-window="infoWindow" :title="infoWindowTitle"></InfoWindow> 95 + <InfoWindow v-show="showInfoWindow" ref="infoWindow" :info-window="infoWindow" :title="infoWindowTitle" :rect="rect"></InfoWindow>
96 </div> 96 </div>
97 </template> 97 </template>
98 98
...@@ -105,6 +105,7 @@ import _ from 'lodash'; ...@@ -105,6 +105,7 @@ import _ from 'lodash';
105 import $ from 'jquery'; 105 import $ from 'jquery';
106 //引入定义的信息窗组件 106 //引入定义的信息窗组件
107 import InfoWindow from '@/components/InfoWindow' 107 import InfoWindow from '@/components/InfoWindow'
108 +import { useRect } from '@vant/use';
108 109
109 const GPS = { 110 const GPS = {
110 PI: 3.14159265358979324, 111 PI: 3.14159265358979324,
...@@ -215,7 +216,8 @@ export default { ...@@ -215,7 +216,8 @@ export default {
215 showInfoWindow: false, 216 showInfoWindow: false,
216 infoWindow: {}, 217 infoWindow: {},
217 infoWindowTitle: '', 218 infoWindowTitle: '',
218 - navBarList: [] 219 + navBarList: [],
220 + rect: {}
219 } 221 }
220 }, 222 },
221 mounted() { 223 mounted() {
...@@ -252,6 +254,13 @@ export default { ...@@ -252,6 +254,13 @@ export default {
252 $('.vjs-tech')[0].currentTime = 0; 254 $('.vjs-tech')[0].currentTime = 0;
253 }) 255 })
254 } 256 }
257 + },
258 + showInfoWindow (val) {
259 + if (val) {
260 + // 元素的大小及其相对于视口的位置
261 + const rect = useRect(this.$refs.root);
262 + this.rect = rect;
263 + }
255 } 264 }
256 }, 265 },
257 methods: { 266 methods: {
......