Hooke / map-demo

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
883a13b7 1 parent f53f3c9f

fix 操作优化

Inline Side-by-side
Showing 3 changed files with 73 additions and 64 deletions
......@@ -18,6 +18,7 @@
"@photo-sphere-viewer/markers-plugin": "^5.7.3",
"@photo-sphere-viewer/stereo-plugin": "^5.7.3",
"@photo-sphere-viewer/virtual-tour-plugin": "^5.7.3",
"@vant/touch-emulator": "^1.4.0",
"@videojs-player/vue": "^1.0.0",
"@vitejs/plugin-legacy": "^1.8.2",
"@vueuse/core": "^8.5.0",
......
<!--
* @Date: 2023-05-19 14:54:27
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-09-18 17:24:37
* @LastEditTime: 2024-09-18 18:39:01
* @FilePath: /map-demo/src/views/bieyuan/map.vue
* @Description: 公众地图主体页面
-->
......@@ -9,7 +9,7 @@
<div ref="root" style="height: 100vh; position: relative; overflow: hidden;">
<div id="container"></div>
<div style="position: absolute; top: 2rem; right: 1rem; display: flex; flex-direction: column;">
<van-icon size="2rem" name="search" color="#DD7850" style="margin-bottom: 1rem;" />
<!-- <van-icon size="2rem" name="search" color="#DD7850" style="margin-bottom: 1rem;" /> -->
<van-image
width="2rem"
height="2rem"
......@@ -35,13 +35,13 @@
</div>
<van-config-provider :theme-vars="themeVars">
<van-floating-panel v-model:height="info_height" :anchors="anchors" @height-change="onHeightChange" :content-draggable="true">
<template #header>
<van-floating-panel v-model:height="info_height" :anchors="anchors" @height-change="onHeightChange">
<!-- <template #header>
<div class="custom-header">
<h3>自定义标题</h3>
<button @click="show = false">关闭</button>
</div>
</template>
</template> -->
<page-info ref="pageInfo"></page-info>
<div v-if="showClose" @click="closeFloatPanel" class="close-float-panel">
<van-icon name="arrow-left" color="#FFF" size="1.5rem" />
......@@ -52,6 +52,7 @@
</template>
<script>
import "@vant/touch-emulator";
// import { mapState } from 'vuex'
import coord from '@/common/map_data'
import my_router from '@/common/my_router'
......@@ -145,8 +146,46 @@ export default {
anchors: [0, (0.5 * window.innerHeight), (1 * window.innerHeight)],
themeVars: {
floatingPanelHeaderHeight: 0,
floatingPanelBorderRadius: '1.25rem'
},
showClose: false,
markerStyle1: { // 未选中
//设置文本样式，Object 同 css 样式表
"padding": ".5rem .2rem .5rem .2rem",
// "margin-bottom": "1rem",
"border-radius": ".25rem",
"background-color": "#DD7850",
// "width": "1rem",
// "border-width": 0,
// "box-shadow": "0 2px 6px 0 rgba(114, 124, 245, .5)",
// "text-align": "center",
"font-size": "0.8rem",
"color": "white",
"writing-mode": "vertical-rl",
"text-orientation": "mixed",
"display": "flex",
"justify-content": "center",
"align-items": "center",
},
markerStyle2: { // 选中
//设置文本样式，Object 同 css 样式表
"padding": ".5rem .2rem .5rem .2rem",
// "margin-bottom": "1rem",
"border-color": "#DD7850",
"border-radius": ".25rem",
"background-color": "#FFF",
// "width": "1rem",
// "border-width": 0,
// "box-shadow": "0 2px 6px 0 rgba(114, 124, 245, .5)",
// "text-align": "center",
"font-size": "0.8rem",
"color": "#DD7850",
"writing-mode": "vertical-rl",
"text-orientation": "mixed",
"display": "flex",
"justify-content": "center",
"align-items": "center",
},
}
},
async mounted() {
......@@ -192,7 +231,7 @@ export default {
// setTimeout(() => {
// this.info_height = (0.5 * window.innerHeight);
// // 浮动面板样式
// $('.van-floating-panel__content').css('borderRadius', '1rem');
// $('.van-floating-panel__content').css('borderRadius', '1.5rem');
// }, 2000);
},
watch: {
......@@ -247,24 +286,7 @@ export default {
// draggable: true, //是否可拖拽
// cursor: "pointer", //指定鼠标悬停时的鼠标样式。
// angle: 10, //点标记的旋转角度
style: {
//设置文本样式，Object 同 css 样式表
"padding": ".5rem .2rem .5rem .2rem",
// "margin-bottom": "1rem",
"border-radius": ".25rem",
"background-color": "#DD7850",
// "width": "1rem",
// "border-width": 0,
// "box-shadow": "0 2px 6px 0 rgba(114, 124, 245, .5)",
// "text-align": "center",
"font-size": "0.8rem",
"color": "white",
"writing-mode": "vertical-rl",
"text-orientation": "mixed",
"display": "flex",
"justify-content": "center",
"align-items": "center",
},
style: this.markerStyle1,
position: entity_info[i].position, //点标记在地图上显示的位置
});
textMarker.setMap(this.map); //将文本标记设置到地图上
......@@ -278,46 +300,11 @@ export default {
this.markerSum.forEach(item => {
if (e.target.hS !== item.hS) {
// 修改文本的样式
item.setStyle({
//设置文本样式，Object 同 css 样式表
"padding": ".5rem .2rem .5rem .2rem",
// "margin-bottom": "1rem",
"border-radius": ".25rem",
"background-color": "#DD7850",
// "width": "1rem",
// "border-width": 0,
// "box-shadow": "0 2px 6px 0 rgba(114, 124, 245, .5)",
// "text-align": "center",
"font-size": "0.8rem",
"color": "white",
"writing-mode": "vertical-rl",
"text-orientation": "mixed",
"display": "flex",
"justify-content": "center",
"align-items": "center",
});
item.setStyle(this.markerStyle1);
}
})
// 修改文本的样式
e.target.setStyle({
//设置文本样式，Object 同 css 样式表
"padding": ".5rem .2rem .5rem .2rem",
// "margin-bottom": "1rem",
"border-color": "#DD7850",
"border-radius": ".25rem",
"background-color": "#FFF",
// "width": "1rem",
// "border-width": 0,
// "box-shadow": "0 2px 6px 0 rgba(114, 124, 245, .5)",
// "text-align": "center",
"font-size": "0.8rem",
"color": "#DD7850",
"writing-mode": "vertical-rl",
"text-orientation": "mixed",
"display": "flex",
"justify-content": "center",
"align-items": "center",
});
e.target.setStyle(this.markerStyle2);
// 修改文本内容
// textMarker.setText('样式已修改');
......@@ -329,7 +316,8 @@ export default {
// 打开浮动面板
this.info_height = (0.5 * window.innerHeight);
// 浮动面板样式
$('.van-floating-panel__content').css('borderRadius', '0.5rem');
$('.van-floating-panel__content').css('borderRadius', '1.25rem');
$('.van-floating-panel').css('boxShadow', '0 0 15px black');
})
}
});
......@@ -582,6 +570,11 @@ export default {
e.lnglat.getLat() +
"],"
console.log(text);
// 关闭浮动面板
this.info_height = 0;
$('.van-floating-panel').css('boxShadow', 'none');
// 还原样式
this.resetMarkStyle();
},
scanQrcode() {
wx.scanQRCode({
......@@ -605,16 +598,22 @@ export default {
path: '/bieyuan/info'
})
} else {
$('.van-floating-panel__content').css('borderRadius', '0.5rem');
$('.van-floating-panel__content').css('borderRadius', '1.25rem');
$('.van-floating-panel').css('boxShadow', 'none');
this.showClose = false;
}
},
closeFloatPanel () {
this.info_height = (0.5 * window.innerHeight);
$('.van-floating-panel__content').css('borderRadius', '0.5rem');
$('.van-floating-panel__content').css('borderRadius', '1.25rem');
this.showClose = false;
// 关闭音频
this.$refs.pageInfo.outerStopAudio();
},
resetMarkStyle () {
this.markerSum.forEach(item => {
item.setStyle(this.markerStyle1);
})
}
}
}
......@@ -810,4 +809,8 @@ export default {
padding: 10px;
background-color: #f7f8fa;
}
.van-floating-panel__header-bar {
background: none;
}
</style>
......
......@@ -269,6 +269,11 @@
resolved "https://mirrors.cloud.tencent.com/npm/@vant/popperjs/-/popperjs-1.3.0.tgz"
integrity sha512-hB+czUG+aHtjhaEmCJDuXOep0YTZjdlRR+4MSmIFnkCQIxJaXLQdSsR90XWvAI2yvKUI7TCGqR8pQg2RtvkMHw==
"@vant/touch-emulator@^1.4.0":
version "1.4.0"
resolved "https://mirrors.cloud.tencent.com/npm/@vant/touch-emulator/-/touch-emulator-1.4.0.tgz#02420ca5f312a7eb6c36c349cbb8e80e6f29ff2f"
integrity sha512-Zt+zISV0+wpOew2S1siOJ3G22y+hapHAKmXM+FhpvWzsRc4qahaYXatCAITuuXt0EcDp7WvEeTO4F7p9AtX/pw==
"@vant/use@^1.6.0":
version "1.6.0"
resolved "https://mirrors.cloud.tencent.com/npm/@vant/use/-/use-1.6.0.tgz#237df3091617255519552ca311ffdfea9de59001"
......