Hooke / map-demo

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
11e5ddb3 1 parent eb9362e8

建筑景点样式调整

Expand all
Inline Side-by-side
Showing 4 changed files with 122 additions and 46 deletions
......@@ -12,8 +12,12 @@ declare module '@vue/runtime-core' {
InfoWindow: typeof import('./src/components/InfoWindow.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']
VanCol: typeof import('vant/es')['Col']
VanDialog: typeof import('vant/es')['Dialog']
VanIcon: typeof import('vant/es')['Icon']
VanPopup: typeof import('vant/es')['Popup']
VanRow: typeof import('vant/es')['Row']
VanTab: typeof import('vant/es')['Tab']
VanTabs: typeof import('vant/es')['Tabs']
}
}
......
This diff is collapsed. Click to expand it.
......@@ -2,16 +2,19 @@
<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 class="hideScrollBar info-window-title">
<div v-for="(item, index) in info.details" :key="index" @click="handleTitle(index)"
:class="[isActive === index ? 'checked' : '', 'item']">
<span>{{ item.name }}</span>
</div>
</div>
<div v-if="info?.details?.length > 3" @click="handleNavScroll()" style="position: fixed; right: 0.75rem; width: 1rem; background-color: #FFF;top: 1.5rem;">
<van-icon v-if="!nav_scroll" name="arrow" color="#888" size="1.25rem" style="vertical-align: sub;" />
<van-icon v-else name="arrow-left" color="#888" size="1.25rem" style="vertical-align: sub;" />
</div>
<div class="info-control">
<div v-for="(item, index) in info.details" :key="index">
<div v-if="isActive === index" :class=" [item.audio ? 'info-text-audio' : 'info-text', 'van-multi-ellipsis--l3'] ">{{ item.note }}</div>
<div v-if="isActive === index && item.audio" 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;" />
......@@ -25,7 +28,8 @@
</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">
<div @click="goTo()" 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;" />&nbsp;
<span style="color: #AB8F57; font-size: 1.1rem;">详情</span>
......@@ -59,6 +63,7 @@
</template>
<script>
import $ from 'jquery'
export default {
props: {
......@@ -66,9 +71,9 @@ export default {
type: Object,
default: () => { }
},
title: {
type: String,
default: ''
info: {
type: Object,
default: () => { }
},
rect: {
type: Object,
......@@ -76,7 +81,6 @@ export default {
},
},
mounted() {
},
watch: {
rect(val) {
......@@ -85,7 +89,7 @@ export default {
infoWindow(val) {
if (val) {
// 加载录音
this.audio.src = 'https://file.365daoyou.cn/mimi-001_1505799708494-k3xkyzv8';
this.audio.src = this.info.details[this.isActive]['audio'];
let play_status = this.audio.play() // 播放
if (play_status) {
play_status.then(() => {
......@@ -110,11 +114,13 @@ export default {
is_play: false,
audio: new Audio(),
widow_info: {},
play_time: '00:00'
play_time: '00:00',
isActive: 0,
nav_scroll: false,
}
},
methods: {
getAudioTime (audio) {
getAudioTime(audio) {
let time = Math.floor(audio);
var minute = time / 60;
var minutes = parseInt(minute);
......@@ -145,6 +151,10 @@ export default {
// 处理音频
this.voice_pause();
this.audio.currentTime = 0
// 默认选中项
this.isActive = 0;
// 滚动状态
this.nav_scroll = false;
},
showDetail() {
this.show_popup = true;
......@@ -153,7 +163,7 @@ export default {
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)
this.voice_play(this.info.details[this.isActive]['audio'], 0)
},
pause() {
this.voice_pause()
......@@ -189,6 +199,33 @@ export default {
voice_pause() {
this.audio.pause();
this.is_play = false;
},
goTo(url) {
location.href = this.info.details[this.isActive].url;
},
handleTitle (index) {
this.isActive = index;
this.voice_pause()
// 标题滚动
if (index === 2 && this.info.details.length > 3) {
this.handleNavScroll()
}
},
handleNavScroll () { // 滚动标题
this.nav_scroll = !this.nav_scroll;
if (this.nav_scroll) {
setTimeout(() => {
$('.info-window-title').animate({
scrollLeft: $('.info-window-title').outerWidth()
}, 1000);
}, 100);
} else {
setTimeout(() => {
$('.info-window-title').animate({
scrollLeft: 0
}, 1000);
}, 100);
}
}
}
}
......@@ -202,10 +239,16 @@ export default {
box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
text-align: left;
border-radius: 5px;
padding: 1rem 1.25rem;
padding: 1.5rem 1.25rem;
overflow: auto;
.info-text {
width: 100%;
line-height: 1.5;
float: left;
color: #7A6C6C;
}
.info-text-audio {
width: 80%;
line-height: 1.5;
float: left;
......@@ -318,4 +361,29 @@ export default {
background-size: 1rem 1rem;
box-shadow: none;
}
.info-window-title {
display: flex;
overflow-x: scroll;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
position: relative;
text-align: left;
.item {
width: 33.333%;
flex-shrink: 0;
color: #888;
font-size: 1.2rem;
margin-bottom: 0.75rem;
display: inline-block;
}
.checked {
color: #AB8F57;
span {
border-bottom: 1.5px solid #AB8F57; padding-bottom: 3px;
}
}
}
</style>
......
<!--
* @Date: 2023-05-19 14:54:27
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-06-05 11:38:09
* @LastEditTime: 2023-06-05 16:47:36
* @FilePath: /map-demo/src/views/index.vue
* @Description: 文件描述
-->
......@@ -9,8 +9,7 @@
<div ref="root" style="height: 100vh; position: relative; overflow: hidden;">
<div id="container"></div>
<div class="nav-bar-wrapper">
<div class="hideScrollBar"
style="display: flex; overflow-x: scroll; overflow-y: hidden; -webkit-overflow-scrolling: touch; position: relative;">
<div class="hideScrollBar" style="display: flex; overflow-x: scroll; overflow-y: hidden; -webkit-overflow-scrolling: touch; position: relative;">
<div v-for="(item, index) in navBarList" :key="index" style="width: 30%; flex-shrink: 0; padding-top: 1rem;" :class="[isActive === index ? 'checked' : '', 'item']"
@click="setNavLayer(item, index)">
<van-icon name="shop-o" size="1.5rem" /><br />
......@@ -28,10 +27,9 @@
<van-popup v-model:show="show_nav_popup" position="bottom" duration="0" :overlay="false"
:style="{ padding: '1rem', bottom: '4.5rem' }">
<div style="text-align: left;">
<div @click="positionMarker()" style="margin-bottom: 1rem; font-size: 1.15rem;"><van-icon name="fire-o" color="red" />&nbsp;&nbsp;三宝楼</div>
<div style="margin-bottom: 1rem; font-size: 1.15rem;"><van-icon name="fire-o" color="red" />&nbsp;&nbsp;法云堂</div>
<div style="margin-bottom: 1rem; font-size: 1.15rem;"><van-icon name="fire-o" color="red" />&nbsp;&nbsp;罗汉堂</div>
<div style="margin-bottom: 1rem; font-size: 1.15rem;"><van-icon name="fire-o" color="red" />&nbsp;&nbsp;大雄宝殿</div>
<div v-for="(item, index) in navList[navName]" :key="index" @click="positionMarker(item)" style="margin-bottom: 1rem; font-size: 1.15rem;">
<van-icon name="fire-o" color="red" />&nbsp;&nbsp;{{ item.name }}
</div>
</div>
</van-popup>
</div>
......@@ -92,7 +90,7 @@
<!-- 自定义组件InfoWindow，初始时需要隐藏 -->
<!-- 隐藏不要使用v-if，因为我们需要渲染完成后的原生html结构作为信息框的dom对象使用 -->
<InfoWindow v-show="showInfoWindow" ref="infoWindow" :info-window="infoWindow" :title="infoWindowTitle" :rect="rect"></InfoWindow>
<InfoWindow v-show="showInfoWindow" ref="infoWindow" :info-window="infoWindow" :info="itemInfo" :rect="rect"></InfoWindow>
</div>
</template>
......@@ -215,21 +213,23 @@ export default {
show_nav_popup: false,
showInfoWindow: false,
infoWindow: {},
infoWindowTitle: '',
itemInfo: '',
navBarList: [],
rect: {}
rect: {},
navList: [],
navName: 'spotInfo'
}
},
mounted() {
this.navBarList = [{
key: 'spot',
name: '景区信息'
name: '景点'
}, {
key: 'activity',
name: '活动设施'
name: '餐饮'
}, {
key: 'public',
name: '公共设施'
name: '出入口'
}, {
key: 'toilet',
name: '卫生间'
......@@ -244,6 +244,7 @@ export default {
this.getLocation()
// 打开贴片地图
this.setTitleLayer()
this.navList = coord;
},
watch: {
show_popup(val) {
......@@ -459,23 +460,22 @@ export default {
},
label: {
content: coord.spotInfo[i].name,
position: 'TM',
position: 'BM',
offset: new AMap.Pixel(0, 10),
minZoom: 18
}
}, {
icon: {},
label: {}
}],
zoomStyleMapping
zoomStyleMapping: coord.spotInfo[i].zoom ? coord.spotInfo[i].zoom : zoomStyleMapping
});
if (clickListener) {
marker.off('click', clickListener)
}
// 绑定景点的点击事件 - 文字出现才能触发
var clickListener = marker.on('click', (e) => {
// this.show_popup = true;
// this.popup_title = x.name;
// this.popup_content = x.note;
// this.video_src = 'https://video.pearvideo.com/mp4/short/20200209/cont-1650197-14888002-hd.mp4'
// this.positionMarker(coord.spotInfo[i].position);
this.positionMarker([120.587519, 31.315924]);
this.positionMarker(coord.spotInfo[i]);
})
//
this.spotInfo.push(marker);
......@@ -899,15 +899,19 @@ export default {
setNavLayer({ key }, index) { // 选择地图图层显示
this.isActive = index;
if (key === 'spot') {
this.navName = 'spotInfo'
this.setSpotLayer()
}
if (key === 'toilet') {
this.navName = 'toiletInfo'
this.setToiletLayer()
}
if (key === 'activity') {
this.navName = 'activityInfo'
this.setActivityLayer()
}
if (key === 'public') {
this.navName = 'publicInfo'
this.setPublicLayer()
}
},
......@@ -923,11 +927,11 @@ export default {
handleNavPopup() {
this.show_nav_popup = !this.show_nav_popup
},
positionMarker(position = [120.587519, 31.315924]) {
positionMarker(item) {
// 点击后创建自定义信息窗口
this.setInfoWindows(position)
this.setInfoWindows(item)
// 把地图中心点设置为当前点击的标记点
this.map.setZoomAndCenter(this.zoom, position);
this.map.setZoomAndCenter(this.zoom, item.position);
//
this.show_nav_popup = false;
// 禁止缩放
......@@ -935,7 +939,7 @@ export default {
zoomEnable: false
});
},
setInfoWindows(position) {
setInfoWindows(item) {
// 此时需要把组件的样式设置为可见
this.showInfoWindow = true
// 设置marker头部的标题信息窗口
......@@ -948,9 +952,9 @@ export default {
offset: new AMap.Pixel(0, -30),
})
this.infoWindow = infoWindow;
this.infoWindowTitle = 'xxxx'
this.itemInfo = item
// 信息窗口打开
infoWindow.open(this.map, position)
infoWindow.open(this.map, item.position)
}
}
......