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