Hooke / map-demo

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
4e7a76f9 1 parent 68a9188f

垂直标题点击弹框样式调整

Expand all
Inline Side-by-side
Showing 5 changed files with 331 additions and 4 deletions
......@@ -10,7 +10,11 @@ export {}
declare module '@vue/runtime-core' {
export interface GlobalComponents {
AudioBackground: typeof import('./src/components/audioBackground.vue')['default']
copy: typeof import('./src/components/InfoWindowWarn copy.vue')['default']
Floor: typeof import('./src/components/Floor/index.vue')['default']
InfoPopup: typeof import('./src/components/InfoPopup.vue')['default']
InfoPopupLite: typeof import('./src/components/InfoPopupLite.vue')['default']
InfoPopupWarn: typeof import('./src/components/InfoPopupWarn.vue')['default']
InfoWindow: typeof import('./src/components/InfoWindow.vue')['default']
InfoWindowLite: typeof import('./src/components/InfoWindowLite.vue')['default']
InfoWindowWarn: typeof import('./src/components/InfoWindowWarn.vue')['default']
......
This diff is collapsed. Click to expand it.
<template>
<div style="position: relative;">
<!-- <div class="info-window-lite-wrapper">
<div :style="{ width: (widow_info.width * 0.8) + 'px', overflow: 'auto' }">
<div class="hideScrollBar info-window-title">
<div class="checked">
<span>{{ info.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>
<div class="van-hairline--top" style="margin: 1rem 0;">
<div @click="goToLocation()" style="width: 100%; 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.25rem" color="#FFF"
style="vertical-align: bottom;" />&nbsp;
<span style="color: #AB8F57; font-size: 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" :close-on-click-overlay="false"
:style="{ padding: '1rem', height: '50%' }">
<van-icon name="cross" size="1.35rem" @click="show_popup = false" style="float: right; color: gray;" />
<div class="popup-wrapper">
<div class="info-window-lite-wrapper1">
<div :style="{ width: (widow_info.width * 0.8) + 'px', overflow: 'auto' }">
<div class="hideScrollBar info-window-title">
<div class="checked">
<span>{{ info.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>
<div class="van-hairline--top" style="margin: 1rem 0;">
<div @click="goToLocation()" style="width: 100%; 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.25rem" color="#FFF"
style="vertical-align: bottom;" />&nbsp;
<span style="color: #AB8F57; font-size: 1rem;">前往</span>
</div>
</div>
</div>
</div>
</van-popup>
</div>
</template>
<script>
import $ from 'jquery'
export default {
props: {
infoWindow: {
type: Object,
default: () => { }
},
info: {
type: Object,
default: () => { }
},
rect: {
type: Object,
default: () => { }
},
show: {
type: Boolean,
default: false
}
},
mounted() {
},
watch: {
show(val) {
this.show_popup = val;
},
rect(val) {
this.widow_info = val;
},
},
data() {
return {
show_popup: false,
popup_title: '',
popup_content: '',
video_src: '',
ind: '',
is_play: false,
audio: new Audio(),
widow_info: {},
play_time: '00:00',
isActive: 0,
nav_scroll: false,
}
},
methods: {
// 关闭
close() {
// 高德地图信息窗关闭的api
this.infoWindow.close()
},
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'
},
goTo(url) {
location.href = this.info.details[this.isActive].url;
},
goToLocation() {
// this.$emit('onLocation', this.info.position)
this.$emit('onLocation', this.info.position)
},
onClose () {
this.$emit('onClose')
}
}
}
</script>
<style lang="less">
.info-window-lite-wrapper1 {
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: 100%;
line-height: 1.5;
float: left;
color: #7A6C6C;
font-size: 0.9rem;
margin-top: 0.5rem;
}
.info-text-audio {
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;
// }
// }
.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.1rem;
margin-bottom: 0.75rem;
display: inline-block;
}
.checked {
color: #AB8F57;
span {
border-bottom: 1.5px solid #AB8F57; padding-bottom: 3px;
}
}
}
}
.leaflet-popup-tip-container {
margin-top: -1px;
width: 2rem;
height: 2rem;
margin-left: -10px;
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>
This diff is collapsed. Click to expand it.
<!--
* @Date: 2023-05-19 14:54:27
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-09-10 17:37:37
* @LastEditTime: 2024-09-11 18:17:44
* @FilePath: /map-demo/src/views/index.vue
* @Description: 公众地图主体页面
-->
......@@ -70,7 +70,7 @@
关闭步行导航
</div>
<!-- <van-popup v-model:show="show_popup" position="bottom" :overlay="true" :style="{ padding: '1rem', height: '100%' }">
<!-- <van-popup v-model:show="show_popup" position="bottom" :overlay="true" teleport="body" :close-on-click-overlay="false" :style="{ padding: '1rem', height: '50%' }">
<van-icon name="cross" size="1.35rem" @click="show_popup = false" style="float: right; color: gray;" />
<div class="popup-wrapper">
<div class="title">
......@@ -97,6 +97,11 @@
:rect="rect"></InfoWindowWarn>
<audioBackground></audioBackground>
<InfoPopup :show="showInfoPopup" :info-window="infoWindow" :info="itemInfo"
@onLocation="infoWindowLocation" @onPlay="onPlay" @onPause="onPause" @onClose="onClose"></InfoPopup>
<InfoPopupLite :show="showInfoLitePopup" :info="itemInfo" @onClose="onLiteClose"></InfoPopupLite>
<InfoPopupWarn :show="showInfoWarnPopup" :info="itemInfo" @onClose="onWarnClose"></InfoPopupWarn>
</div>
</template>
......@@ -116,6 +121,9 @@ import audioBackground from '@/components/audioBackground'
import { useRect } from '@vant/use';
import { mapAPI } from '@/api/map.js'
import wx from 'weixin-js-sdk'
import InfoPopup from '@/components/InfoPopup'
import InfoPopupLite from '@/components/InfoPopupLite'
import InfoPopupWarn from '@/components/InfoPopupWarn'
const GPS = {
PI: 3.14159265358979324,
......@@ -174,7 +182,7 @@ const GPS = {
};
export default {
components: { InfoWindow, InfoWindowLite, InfoWindowWarn, audioBackground },
components: { InfoWindow, InfoWindowLite, InfoWindowWarn, audioBackground, InfoPopup, InfoPopupLite, InfoPopupWarn },
data() {
return {
map: '',
......@@ -204,7 +212,7 @@ export default {
current_lat: '',
current_route: '',
current_safe_route: [],
// show_popup: false,
show_popup: false,
dialog_show: false,
dialog_text: '',
walk_route: '',
......@@ -250,6 +258,9 @@ export default {
data_rotation: 0, // 接口获取-地图旋转角度
data_paths: {}, // 接口获取-地图导航路径
data_path_list: [], // 接口获取-地图导航路径
showInfoPopup: false,
showInfoLitePopup: false,
showInfoWarnPopup: false,
}
},
async mounted() {
......@@ -449,6 +460,22 @@ export default {
},
position: entity_info[i].position, //点标记在地图上显示的位置
});
if (clickListener) {
textMarker.off('click', clickListener)
}
// 绑定景点的点击事件 - 文字出现才能触发
var clickListener = textMarker.on('click', (e) => {
console.warn(e);
this.itemInfo = entity_info[i];
// 不同弹框类型
if (entity_info[i].window_type === 'normal') {
this.showInfoPopup = true;
} else if (entity_info[i].window_type === 'lite') {
this.showInfoLitePopup = true;
} else if (entity_info[i].window_type === 'warn') {
this.showInfoWarnPopup = true;
}
})
textMarker.setMap(this.map); //将文本标记设置到地图上
} else { // 默认方向
// 创建一个 LabelMarker 实例
......@@ -1277,6 +1304,15 @@ export default {
// this.map.add(this.spotInfo);
},
onPause(name) { },
onClose () {
this.showInfoPopup = false;
},
onLiteClose () {
this.showInfoLitePopup = false;
},
onWarnClose () {
this.showInfoWarnPopup = false;
},
}
}
</script>
......