Hooke / map-demo

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
0e2d36e3 1 parent d0851587

infoWindow组件优化

Inline Side-by-side
Showing 2 changed files with 148 additions and 24 deletions
<template>
<div>
<div class="box-card" style="padding: 0 80 30 80;width: 400px;border-radius: 10px;">
{{ title }}
<div id="del-div">
<div type="primary" icon="el-icon-close" @click="close()">123</div>
<div style="position: relative;">
<div class="info-window-wrapper">
<div class="t-popup-content">
<div class="popup-content" style="height: 13.5rem;">
<div style="position: relative;">
<h3 class="view-name">三宝楼</h3>
<van-icon @click="close" name="cross" size="1.25rem" style="position: absolute; right: 0.75rem; top: 0.75rem;" />
</div>
<img class="view-photo"
src="https://img0.baidu.com/it/u=3974116483,397969091&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=496">
<p class="introduction" style="padding: 0.5rem; padding-bottom: 0;">尊敬的游客朋友们您好，欢迎来到西园寺，您现在所到的地方是“三宝楼......</p>
<div class="control-play"><span></span></div>
<div @click="showDetail" class="show-details" style="color: white; text-align: center; line-height: 3rem;">详情</div>
</div>
</div>
<div style="text-align: center;">
<button type="primary">主要按钮</button>
</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>
</div>
</van-popup>
</div>
</template>
......@@ -25,27 +45,128 @@ export default {
default: ''
}
},
data () {
return {
show_popup: false,
popup_title: '',
popup_content: '',
video_src: '',
}
},
methods: {
// 关闭
close() {
// 高德地图信息窗关闭的api
this.infoWindow.close()
},
edit() {
console.log('编辑按钮测试')
},
del() {
console.log('删除按钮测试')
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'
}
}
}
</script>
<style lang="less" scoped>
#del-div {
position: absolute;
right: 20;
top: 20;
transform: scale(1.2);
<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: 12px;
padding: 0;
.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>
......
<!--
* @Date: 2023-05-19 14:54:27
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-05-30 18:09:09
* @LastEditTime: 2023-05-31 13:11:26
* @FilePath: /map-demo/src/views/index.vue
* @Description: 文件描述
-->
......@@ -78,7 +78,7 @@
</div>
</div>
</div>
<van-popup v-model:show="show_popup" position="bottom" :overlay="true" :style="{ padding: '1rem' }">
<van-popup 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">
......@@ -825,6 +825,8 @@ export default {
" ] 的位置单击了地图！当前层级" +
zoom;
console.warn(text);
// 点击空白处 关闭弹框
this.$refs['infoWindow'].close()
},
setWalkRoute() {
//步行导航
......@@ -877,13 +879,13 @@ export default {
positionMarker() {
// this.setInfoWindow([120.587519, 31.315924])
// 点击后创建自定义信息窗口
this.setInfoWindows('title', 'content', [120.587519, 31.315924])
this.setInfoWindows([120.587519, 31.315924])
// 把地图中心点设置为当前点击的标记点
this.map.setZoomAndCenter(this.zoom, [120.587519, 31.315924]);
//
this.show_nav_popup = false;
},
setInfoWindows(title, content, position) {
setInfoWindows(position) {
// 此时需要把组件的样式设置为可见
this.showInfoWindow = true
// 设置marker头部的标题信息窗口
......@@ -990,6 +992,7 @@ export default {
top: 10%;
width: 20px;
height: auto;
z-index: 100;
.box-wrapper {
display: flex;
......