hookehuyr

fix 导航逻辑修改 从marker里面获取

<!--
* @Date: 2024-09-15 22:08:49
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-09-23 14:03:31
* @LastEditTime: 2024-09-23 14:55:02
* @FilePath: /map-demo/src/views/bieyuan/info.vue
* @Description: 文件描述
-->
......@@ -47,7 +47,7 @@
</div>
<div v-if="page_details.experience_audio.length" class="audio-wrapper">
<div :class="['audio-item', play_audio_index === index ? 'click' : '']" v-for="(item, index) in page_details.experience_audio" :key="index">
<div>{{ item.name }}</div>
<div>{{ item.description }}</div>
<!-- <div :class="['audio-icon', play_audio_index === index ? 'click' : '']"></div> -->
<van-icon @click="stopAudio(item, index)" v-if="item.play" size="2rem" name="stop-circle-o" color="#DD7850" />
<van-icon v-else @click="playAudio(item, index)" size="2rem" name="https://cdn.ipadbiz.cn/bieyuan/map/icon/audio_icon.png" />
......@@ -98,7 +98,7 @@ watch(
() => props.info,
(v) => {
if (v.details.length) {
page_details.value = { ...v.details[0], position: v.position };
page_details.value = { ...v.details[0], position: v.position, path: v.path };
// 获取浏览器可视范围的高度
$('.info-page').height(props.height + 'px');
}
......@@ -169,11 +169,12 @@ onMounted(async () => {
const marker_id = $route.query.marker_id;
const current_marker = raw_list.filter(item => item.id == marker_id)[0];
//
page_details.value = { ...current_marker.details[0], position: current_marker.position };
page_details.value = { ...current_marker.details[0], position: current_marker.position, path: current_marker.path };
// 富文本转义, 分割线样式转换
page_details.value.introduction = page_details.value.introduction?.replace(/\<hr\>/g, '<div class="van-hairline--bottom" style="margin: 1rem 0;"></div>')
page_details.value.story = page_details.value.story?.replace(/\<hr\>/g, '<div class="van-hairline--bottom" style="margin: 1rem 0;"></div>')
page_details.value.experience = page_details.value.experience?.replace(/\<hr\>/g, '<div class="van-hairline--bottom" style="margin: 1rem 0;"></div>')
console.log("🚀 ~ file: info.vue:177 ~ onMounted ~ page_details.value:", page_details.value);
}
});
......@@ -197,14 +198,14 @@ const goTo = () => { // 打开标记地图显示
path: '/bieyuan/map',
query: {
id: $route.query.id,
marker_id: '12345'
marker_id: $route.query.marker_id
}
})
} else { // 地图页
//
emit("closeFloat", false);
//
emit("route", 'marker_id');
emit("route", {name: 'marker', path: page_details.value.path});
}
}
......
<!--
* @Date: 2023-05-19 14:54:27
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-09-23 11:11:19
* @LastEditTime: 2024-09-23 14:54:34
* @FilePath: /map-demo/src/views/bieyuan/map.vue
* @Description: 公众地图主体页面
-->
......@@ -384,12 +384,14 @@ export default {
// this.map.setZoomAndCenter(this.zoom, this.itemInfo.position);
})
}
// TODO: ID问题看看实际名称叫什么
// TODO: 获取详情定位信息用来导航
// 导航路径
let marker_id = this.$route.query.marker_id;
if (marker_id) {
this.$nextTick(() => {
this.addSafeRoute(this.data_path_list[0]);
let marker = this.navBarList[0]['list'].filter(item => item.id == marker_id)
let path = marker[0].path;
this.addSafeRoute({name: 'marker', path});
// 获取当前 URL 的查询参数
let query = { ...this.$route.query };
......@@ -791,10 +793,10 @@ export default {
// 关闭导航提示
this.show_walk_route = true;
},
onRoute (marker_id) {
console.warn(marker_id);
onRoute (path) {
console.warn(path);
// 模拟新增路线
this.addSafeRoute(this.data_path_list[0]);
this.addSafeRoute(path);
// 定位到当前位置中心
this.map.setZoomAndCenter(this.zoom, this.data_center);
},
......