Hooke / map-demo

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
91cd6978 1 parent 10415a3e

导航功能逻辑调整

Inline Side-by-side
Showing 2 changed files with 159 additions and 6 deletions
<!--
* @Date: 2024-09-15 22:08:49
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-09-19 11:02:19
* @LastEditTime: 2024-09-19 14:06:20
* @FilePath: /map-demo/src/views/bieyuan/info.vue
* @Description: 文件描述
-->
......@@ -131,13 +131,28 @@ const outerStopAudio = () => {
audio.value.pause();
}
const emit = defineEmits(["closeFloat"]);
const emit = defineEmits(["closeFloat", 'route']);
const goTo = () => { // 打开标记地图显示
if ($router.currentRoute.value.path === '/bieyuan/info') { // 详情页
$router.push({
path: '/bieyuan/map',
query: {
id: $route.query.id,
marker_id: '12345'
}
})
} else { // 地图页
//
emit("closeFloat", false);
//
let test_paths = {
name: 'test',
path: [[117.049724,26.838248],
[117.049564,26.838155],
[117.04941,26.837998],
[117.049233,26.837796],]
}
emit("route", test_paths);
}
}
......
<!--
* @Date: 2023-05-19 14:54:27
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-09-19 11:02:47
* @LastEditTime: 2024-09-19 14:12:11
* @FilePath: /map-demo/src/views/bieyuan/map.vue
* @Description: 公众地图主体页面
-->
......@@ -42,12 +42,16 @@
<button @click="show = false">关闭</button>
</div>
</template> -->
<page-info ref="pageInfo" @close-float="onCloseFloat"></page-info>
<page-info ref="pageInfo" @close-float="onCloseFloat" @route="onRoute"></page-info>
<!-- <div v-if="showClose" @click="closeFloatPanel" class="close-float-panel">
<van-icon name="arrow-left" color="#FFF" size="1.5rem" />
</div> -->
</van-floating-panel>
</van-config-provider>
<div v-if="!show_walk_route" @click="removeSafeRoute('test')" class="walk-nav-text">
关闭步行导航
</div>
</div>
</template>
......@@ -186,6 +190,9 @@ export default {
"justify-content": "center",
"align-items": "center",
},
current_safe_route: [],
route_safe_marker: [],
show_walk_route: true,
}
},
async mounted() {
......@@ -235,6 +242,16 @@ export default {
// }, 2000);
},
watch: {
// // 监听 $route 对象的 query 属性
// '$route.query': {
// handler(newQuery, oldQuery) {
// if (newQuery.marker_id) {
// }
// },
// immediate: true, // 设置为 true，确保在初始化时也执行一次 handler
// deep: true // 如果 query 是嵌套对象，可以设置 deep 监听深层变化
// }
},
methods: {
initMap() {
......@@ -323,6 +340,21 @@ export default {
this.map.setZoomAndCenter(this.zoom, this.itemInfo.position);
})
}
// 导航路径
console.warn(entity_info[i]);
let marker_id = this.$route.query.marker_id;
if (marker_id) {
let test_paths = {
name: 'test',
path: [[117.049724,26.838248],
[117.049564,26.838155],
[117.04941,26.837998],
[117.049233,26.837796],]
}
this.$nextTick(() => {
this.addSafeRoute(test_paths);
});
}
});
this.map.add(this.markerSum);
},
......@@ -598,7 +630,10 @@ export default {
// $('.van-floating-panel__content').css('borderRadius', '0');
// this.showClose = true;
this.$router.push({
path: '/bieyuan/info'
path: '/bieyuan/info',
query: {
id: this.$route.query.id,
}
})
} else {
$('.van-floating-panel__content').css('borderRadius', '1.25rem');
......@@ -623,6 +658,109 @@ export default {
$('.van-floating-panel__content').css('borderRadius', '1.25rem');
$('.van-floating-panel').css('boxShadow', 'none');
this.resetMarkStyle();
},
addSafeRoute({name, path}) { // 新增路径
// 获取对象的第一个键和值
// let firstKey = Object.keys(this.data_paths)[0];
// let firstValue = this.data_paths[firstKey];
// 行动路线
// var path = [
// [120.587645, 31.314833],
// [120.587709, 31.314338],
// [120.588211, 31.314377],
// ];
// console.warn(firstValue);
// var path = firstValue;
// 生成折线地图路径
let current_safe_route = new AMap.Polyline({
path,
isOutline: true,
outlineColor: '#179FB1',
borderWeight: 1,
strokeColor: '#179FB1',
strokeOpacity: 1,
strokeWeight: 3,
// 折线样式还支持 'dashed'
strokeStyle: 'solid',
// strokeStyle是dashed时有效
strokeDasharray: [10, 5],
lineJoin: 'round',
lineCap: 'round',
zIndex: 50
})
this.map.add([current_safe_route]);
this.current_safe_route.push({
key: name,
path: current_safe_route
})
// 设置起始点标记
var marker1 = new AMap.Marker({
icon: new AMap.Icon({
image: 'https://cdn.ipadbiz.cn/bieyuan/map/icon/Ellipse%2013@3x.png',
size: new AMap.Size(15, 15),
// 图标所用图片大小
imageSize: new AMap.Size(15, 15),
// 图标取图偏移量
imageOffset: new AMap.Pixel(0, 0)
}),
position: new AMap.LngLat(path[0][0], path[0][1]), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
anchor: 'bottom-center',
offset: new AMap.Pixel(0, 0)
});
// marker1.setLabel({
// direction: 'right',
// offset: new AMap.Pixel(0, -10), //设置文本标注偏移量
// content: "<div class='info'>起点</div>", //设置文本标注内容
// });
var marker2 = new AMap.Marker({
icon: new AMap.Icon({
image: 'https://cdn.ipadbiz.cn/bieyuan/map/icon/Ellipse%2013@3x.png',
size: new AMap.Size(15, 15),
// 图标所用图片大小
imageSize: new AMap.Size(15, 15),
// 图标取图偏移量
imageOffset: new AMap.Pixel(0, 0)
}),
position: new AMap.LngLat(path[path.length - 1][0], path[path.length - 1][1]), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
anchor: 'bottom-center',
offset: new AMap.Pixel(0, 0)
});
// marker2.setLabel({
// direction: 'right',
// offset: new AMap.Pixel(0, -10), //设置文本标注偏移量
// content: "<div class='info'>终点</div>", //设置文本标注内容
// });
// 新增逃生路线标记
// this.route_safe_marker = [marker1, marker2]
// this.map.add(this.route_safe_marker);
// 新增逃生路线标记
let route_safe_marker = [marker1, marker2]
this.map.add(route_safe_marker);
this.route_safe_marker.push({
key: name,
path: route_safe_marker
});
// 关闭导航提示
this.show_walk_route = false;
},
removeSafeRoute(name) { // 移除地图路线
this.current_safe_route.forEach(item => {
if (item.key === name) {
this.map.remove([item.path]); // 删除地图折线
}
});
// this.map.remove(this.route_safe_marker); // 删除起始点标记
this.route_safe_marker.forEach(item => {
if (item.key === name) {
this.map.remove(item.path); // 删除起始点标记
}
});
// 关闭导航提示
this.show_walk_route = true;
},
onRoute (path) {
// 模拟新增路线
this.addSafeRoute(path);
}
}
}
......