Toggle navigation
Toggle navigation
This project
Loading...
Sign in
Hooke
/
map-demo
Go to a project
Toggle navigation
Toggle navigation pinning
Projects
Groups
Snippets
Help
Project
Activity
Repository
Pipelines
Graphs
Issues
0
Merge Requests
0
Wiki
Snippets
Network
Create a new issue
Builds
Commits
Issue Boards
Authored by
hookehuyr
2024-09-19 11:04:28 +0800
Browse Files
Options
Browse Files
Download
Email Patches
Plain Diff
Commit
10415a3ef047d96315257526be1c8c3bb7c8bb86
10415a3e
1 parent
883a13b7
地图标记显示样式调整,浮动框效果调整
Hide whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
38 additions
and
19 deletions
src/views/bieyuan/info.vue
src/views/bieyuan/map.vue
src/views/bieyuan/info.vue
View file @
10415a3
<!--
* @Date: 2024-09-15 22:08:49
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-09-1
8 17:25:26
* @LastEditTime: 2024-09-1
9 11:02:19
* @FilePath: /map-demo/src/views/bieyuan/info.vue
* @Description: 文件描述
-->
...
...
@@ -11,7 +11,7 @@
<van-config-provider :theme-vars="themeVars">
<van-swipe class="my-swipe" indicator-color="#DD7850" lazy-render :autoplay="5000">
<van-swipe-item v-for="image in images" :key="image">
<van-image fit="cover" width="100%" height="1
5
rem" :src="image" />
<van-image fit="cover" width="100%" height="1
3
rem" :src="image" />
</van-swipe-item>
</van-swipe>
</van-config-provider>
...
...
@@ -22,7 +22,7 @@
<p class="info-title">选佛场</p>
<p class="info-sub-title">南楼2层</p>
</div>
<div class="info-btn">前往</div>
<div
@click="goTo()"
class="info-btn">前往</div>
</div>
<div class="van-hairline--bottom">
<van-tabs v-model:active="active" color="#DD7850" title-active-color="#DD7850" sticky>
...
...
@@ -131,6 +131,16 @@ const outerStopAudio = () => {
audio.value.pause();
}
const emit = defineEmits(["closeFloat"]);
const goTo = () => { // 打开标记地图显示
if ($router.currentRoute.value.path === '/bieyuan/info') { // 详情页
} else { // 地图页
//
emit("closeFloat", false);
}
}
defineExpose({
outerStopAudio
})
...
...
src/views/bieyuan/map.vue
View file @
10415a3
<!--
* @Date: 2023-05-19 14:54:27
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-09-1
8 18:39:01
* @LastEditTime: 2024-09-1
9 11:02:47
* @FilePath: /map-demo/src/views/bieyuan/map.vue
* @Description: 公众地图主体页面
-->
...
...
@@ -42,10 +42,10 @@
<button @click="show = false">关闭</button>
</div>
</template> -->
<page-info ref="pageInfo"></page-info>
<div v-if="showClose" @click="closeFloatPanel" class="close-float-panel">
<page-info ref="pageInfo"
@close-float="onCloseFloat"
></page-info>
<
!-- <
div v-if="showClose" @click="closeFloatPanel" class="close-float-panel">
<van-icon name="arrow-left" color="#FFF" size="1.5rem" />
</div>
</div>
-->
</van-floating-panel>
</van-config-provider>
</div>
...
...
@@ -143,43 +143,43 @@ export default {
data_paths: {}, // 接口获取-地图导航路径
data_path_list: [], // 接口获取-地图导航路径
info_height: 0,
anchors: [0, (0.5 * window.innerHeight), (1 * window.innerHeight)],
anchors: [0, (0.
4
5 * window.innerHeight), (1 * window.innerHeight)],
themeVars: {
floatingPanelHeaderHeight: 0,
floatingPanelBorderRadius: '1.25rem'
},
showClose: false,
markerStyle1: { //
未
选中
markerStyle1: { // 选中
//设置文本样式,Object 同 css 样式表
"padding": ".5rem .2rem .5rem .2rem",
// "margin-bottom": "1rem",
"border-color": "#DD7850",
"border-radius": ".25rem",
"background-color": "#
DD7850
",
"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": "
white
",
"color": "
#DD7850
",
"writing-mode": "vertical-rl",
"text-orientation": "mixed",
"display": "flex",
"justify-content": "center",
"align-items": "center",
},
markerStyle2: { // 选中
markerStyle2: { //
未
选中
//设置文本样式,Object 同 css 样式表
"padding": ".5rem .2rem .5rem .2rem",
// "margin-bottom": "1rem",
"border-color": "#DD7850",
"border-radius": ".25rem",
"background-color": "#
FFF
",
"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": "
#DD7850
",
"color": "
white
",
"writing-mode": "vertical-rl",
"text-orientation": "mixed",
"display": "flex",
...
...
@@ -314,10 +314,13 @@ export default {
this.itemInfo = entity_info[i];
// 打开浮动面板
this.info_height = (0.5 * window.innerHeight);
this.info_height = (0.
4
5 * window.innerHeight);
// 浮动面板样式
$('.van-floating-panel__content').css('borderRadius', '1.25rem');
$('.van-floating-panel').css('boxShadow', '0 0 15px black');
// 定位到当前位置中心
this.map.setZoomAndCenter(this.zoom, this.itemInfo.position);
})
}
});
...
...
@@ -570,11 +573,11 @@ export default {
e.lnglat.getLat() +
"],"
console.log(text);
// 关闭浮动面板
/
*/
/ 关闭浮动面板
this.info_height = 0;
$('.van-floating-panel').css('boxShadow', 'none');
// 还原样式
this.resetMarkStyle();
this.resetMarkStyle();
*/
},
scanQrcode() {
wx.scanQRCode({
...
...
@@ -604,7 +607,7 @@ export default {
}
},
closeFloatPanel () {
this.info_height = (0.5 * window.innerHeight);
this.info_height = (0.
4
5 * window.innerHeight);
$('.van-floating-panel__content').css('borderRadius', '1.25rem');
this.showClose = false;
// 关闭音频
...
...
@@ -614,6 +617,12 @@ export default {
this.markerSum.forEach(item => {
item.setStyle(this.markerStyle1);
})
},
onCloseFloat () {
this.info_height = 0;
$('.van-floating-panel__content').css('borderRadius', '1.25rem');
$('.van-floating-panel').css('boxShadow', 'none');
this.resetMarkStyle();
}
}
}
...
...
Please
register
or
login
to post a comment