Hooke / map-demo

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
f614f38c 1 parent f41f9f93

新增弹框组件

Expand all
Inline Side-by-side
Showing 5 changed files with 399 additions and 35 deletions
......@@ -9,7 +9,12 @@ export {}
declare module '@vue/runtime-core' {
export interface GlobalComponents {
2: typeof import('./src/components/InfoWindow copy 2.vue')['default']
copy: typeof import('./src/components/InfoWindow copy.vue')['default']
InfoWindow: typeof import('./src/components/InfoWindow.vue')['default']
InfoWindowLite: typeof import('./src/components/InfoWindowLite.vue')['default']
InfoWindowSingle: typeof import('./src/components/InfoWindowSingle.vue')['default']
InfoWindowWarn: typeof import('./src/components/InfoWindowWarn.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']
VanCol: typeof import('vant/es')['Col']
......
......@@ -341,6 +341,31 @@ export default {
// 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 {
......@@ -362,28 +387,4 @@ export default {
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.1rem;
margin-bottom: 0.75rem;
display: inline-block;
}
.checked {
color: #AB8F57;
span {
border-bottom: 1.5px solid #AB8F57; padding-bottom: 3px;
}
}
}
</style>
......
<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 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.5rem" color="#FFF"
style="vertical-align: bottom;" />&nbsp;
<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>
import $ from 'jquery'
export default {
props: {
infoWindow: {
type: Object,
default: () => { }
},
info: {
type: Object,
default: () => { }
},
rect: {
type: Object,
default: () => { }
},
},
mounted() {
},
watch: {
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() {
console.warn(this.infoWindow);
// 高德地图信息窗关闭的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;
},
}
}
</script>
<style lang="less">
.info-window-lite-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: 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;
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: -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>
This diff is collapsed. Click to expand it.
<!--
* @Date: 2023-05-19 14:54:27
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-06-06 14:45:27
* @LastEditTime: 2023-06-06 17:19:52
* @FilePath: /map-demo/src/views/index.vue
* @Description: 文件描述
-->
......@@ -86,6 +86,8 @@
<!-- 自定义组件InfoWindow，初始时需要隐藏 -->
<!-- 隐藏不要使用v-if，因为我们需要渲染完成后的原生html结构作为信息框的dom对象使用 -->
<InfoWindow v-show="showInfoWindow" ref="infoWindow" :info-window="infoWindow" :info="itemInfo" :rect="rect"></InfoWindow>
<InfoWindowLite v-show="showInfoWindowLite" ref="infoWindowLite" :info-window="infoWindowLite" :info="itemInfo" :rect="rect"></InfoWindowLite>
<InfoWindowWarn v-show="showInfoWindowWarn" ref="infoWindowWarn" :info-window="infoWindowWarn" :info="itemInfo" :rect="rect"></InfoWindowWarn>
</div>
</template>
......@@ -98,6 +100,8 @@ import _ from 'lodash';
import $ from 'jquery';
//引入定义的信息窗组件
import InfoWindow from '@/components/InfoWindow'
import InfoWindowLite from '@/components/InfoWindowLite'
import InfoWindowWarn from '@/components/InfoWindowWarn'
import { useRect } from '@vant/use';
const GPS = {
......@@ -207,7 +211,11 @@ export default {
video_src: '',
show_nav_popup: false,
showInfoWindow: false,
showInfoWindowLite: false,
showInfoWindowWarn: false,
infoWindow: {},
infoWindowLite: {},
infoWindowWarn: {},
itemInfo: {},
navBarList: [],
rect: {},
......@@ -257,6 +265,20 @@ export default {
const rect = useRect(this.$refs.root);
this.rect = rect;
}
},
showInfoWindowLite (val) {
if (val) {
// 元素的大小及其相对于视口的位置
const rect = useRect(this.$refs.root);
this.rect = rect;
}
},
showInfoWindowWarn (val) {
if (val) {
// 元素的大小及其相对于视口的位置
const rect = useRect(this.$refs.root);
this.rect = rect;
}
}
},
methods: {
......@@ -506,7 +528,7 @@ export default {
}
// 绑定景点的点击事件 - 文字出现才能触发
var clickListener = marker.on('click', (e) => {
this.show_popup = true;
this.positionWarnMarker(coord.toiletInfo[i]);
})
//
this.toiletInfo.push(marker);
......@@ -543,7 +565,7 @@ export default {
}
// 绑定景点的点击事件 - 文字出现才能触发
var clickListener = marker.on('click', (e) => {
this.show_popup = true;
this.positionLiteMarker(coord.activityInfo[i]);
})
//
this.activityInfo.push(marker);
......@@ -580,7 +602,7 @@ export default {
}
// 绑定景点的点击事件 - 文字出现才能触发
var clickListener = marker.on('click', (e) => {
this.show_popup = true;
this.positionLiteMarker(coord.publicInfo[i]);
})
//
this.publicInfo.push(marker);
......@@ -859,13 +881,7 @@ export default {
zoom;
console.warn(text);
// 点击空白处 关闭弹框
if (this.showInfoWindow) {
this.$refs['infoWindow'].close();
// 打开缩放
this.map.setStatus({
zoomEnable: true
});
}
this.closeInfoWindow()
},
setWalkRoute() {
//步行导航
......@@ -909,6 +925,7 @@ export default {
this.navName = 'publicInfo'
this.setPublicLayer()
}
this.closeInfoWindow()
},
handleSafeRoute(status) { // 打开/关闭逃生路线线
if (status) {
......@@ -934,6 +951,30 @@ export default {
zoomEnable: false
});
},
positionLiteMarker(item) {
// 点击后创建自定义信息窗口
this.setInfoWindowsLite(item)
// 把地图中心点设置为当前点击的标记点
this.map.setZoomAndCenter(this.zoom, item.position);
//
this.show_nav_popup = false;
// 禁止缩放
this.map.setStatus({
zoomEnable: false
});
},
positionWarnMarker(item) {
// 点击后创建自定义信息窗口
this.setInfoWindowsWarn(item)
// 把地图中心点设置为当前点击的标记点
this.map.setZoomAndCenter(this.zoom, item.position);
//
this.show_nav_popup = false;
// 禁止缩放
this.map.setStatus({
zoomEnable: false
});
},
setInfoWindows(item) {
// 此时需要把组件的样式设置为可见
this.showInfoWindow = true
......@@ -950,6 +991,63 @@ export default {
this.itemInfo = item
// 信息窗口打开
infoWindow.open(this.map, item.position)
},
setInfoWindowsLite(item) {
// 此时需要把组件的样式设置为可见
this.showInfoWindowLite = true
// 设置marker头部的标题信息窗口
const infoWindowLite = new AMap.InfoWindow({
// 使用自定义窗体
isCustom: true,
// 只有当组件渲染完毕后，通过$el才能拿到原生的dom对象
content: this.$refs['infoWindowLite'].$el,
// 设置定位偏移量
offset: new AMap.Pixel(0, -30),
})
this.infoWindowLite = infoWindowLite;
this.itemInfo = item
// 信息窗口打开
infoWindowLite.open(this.map, item.position)
},
setInfoWindowsWarn(item) {
// 此时需要把组件的样式设置为可见
this.showInfoWindowWarn = true
// 设置marker头部的标题信息窗口
const infoWindowWarn = new AMap.InfoWindow({
// 使用自定义窗体
isCustom: true,
// 只有当组件渲染完毕后，通过$el才能拿到原生的dom对象
content: this.$refs['infoWindowWarn'].$el,
// 设置定位偏移量
offset: new AMap.Pixel(0, -30),
})
this.infoWindowWarn = infoWindowWarn;
this.itemInfo = item
// 信息窗口打开
infoWindowWarn.open(this.map, item.position)
},
closeInfoWindow () {
if (this.showInfoWindow) {
this.$refs['infoWindow'].close();
// 打开缩放
this.map.setStatus({
zoomEnable: true
});
}
if (this.showInfoWindowLite) {
this.$refs['infoWindowLite'].close();
// 打开缩放
this.map.setStatus({
zoomEnable: true
});
}
if (this.showInfoWindowWarn) {
this.$refs['infoWindowWarn'].close();
// 打开缩放
this.map.setStatus({
zoomEnable: true
});
}
}
}
......