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
1 <!-- 1 <!--
2 * @Date: 2024-09-15 22:08:49 2 * @Date: 2024-09-15 22:08:49
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-09-19 11:02:19 4 + * @LastEditTime: 2024-09-19 14:06:20
5 * @FilePath: /map-demo/src/views/bieyuan/info.vue 5 * @FilePath: /map-demo/src/views/bieyuan/info.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
...@@ -131,13 +131,28 @@ const outerStopAudio = () => { ...@@ -131,13 +131,28 @@ const outerStopAudio = () => {
131 audio.value.pause(); 131 audio.value.pause();
132 } 132 }
133 133
134 -const emit = defineEmits(["closeFloat"]); 134 +const emit = defineEmits(["closeFloat", 'route']);
135 const goTo = () => { // 打开标记地图显示 135 const goTo = () => { // 打开标记地图显示
136 if ($router.currentRoute.value.path === '/bieyuan/info') { // 详情页 136 if ($router.currentRoute.value.path === '/bieyuan/info') { // 详情页
137 - 137 + $router.push({
138 + path: '/bieyuan/map',
139 + query: {
140 + id: $route.query.id,
141 + marker_id: '12345'
142 + }
143 + })
138 } else { // 地图页 144 } else { // 地图页
139 // 145 //
140 emit("closeFloat", false); 146 emit("closeFloat", false);
147 + //
148 + let test_paths = {
149 + name: 'test',
150 + path: [[117.049724,26.838248],
151 + [117.049564,26.838155],
152 + [117.04941,26.837998],
153 + [117.049233,26.837796],]
154 + }
155 + emit("route", test_paths);
141 } 156 }
142 } 157 }
143 158
......
1 <!-- 1 <!--
2 * @Date: 2023-05-19 14:54:27 2 * @Date: 2023-05-19 14:54:27
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-09-19 11:02:47 4 + * @LastEditTime: 2024-09-19 14:12:11
5 * @FilePath: /map-demo/src/views/bieyuan/map.vue 5 * @FilePath: /map-demo/src/views/bieyuan/map.vue
6 * @Description: 公众地图主体页面 6 * @Description: 公众地图主体页面
7 --> 7 -->
...@@ -42,12 +42,16 @@ ...@@ -42,12 +42,16 @@
42 <button @click="show = false">关闭</button> 42 <button @click="show = false">关闭</button>
43 </div> 43 </div>
44 </template> --> 44 </template> -->
45 - <page-info ref="pageInfo" @close-float="onCloseFloat"></page-info> 45 + <page-info ref="pageInfo" @close-float="onCloseFloat" @route="onRoute"></page-info>
46 <!-- <div v-if="showClose" @click="closeFloatPanel" class="close-float-panel"> 46 <!-- <div v-if="showClose" @click="closeFloatPanel" class="close-float-panel">
47 <van-icon name="arrow-left" color="#FFF" size="1.5rem" /> 47 <van-icon name="arrow-left" color="#FFF" size="1.5rem" />
48 </div> --> 48 </div> -->
49 </van-floating-panel> 49 </van-floating-panel>
50 </van-config-provider> 50 </van-config-provider>
51 +
52 + <div v-if="!show_walk_route" @click="removeSafeRoute('test')" class="walk-nav-text">
53 + 关闭步行导航
54 + </div>
51 </div> 55 </div>
52 </template> 56 </template>
53 57
...@@ -186,6 +190,9 @@ export default { ...@@ -186,6 +190,9 @@ export default {
186 "justify-content": "center", 190 "justify-content": "center",
187 "align-items": "center", 191 "align-items": "center",
188 }, 192 },
193 + current_safe_route: [],
194 + route_safe_marker: [],
195 + show_walk_route: true,
189 } 196 }
190 }, 197 },
191 async mounted() { 198 async mounted() {
...@@ -235,6 +242,16 @@ export default { ...@@ -235,6 +242,16 @@ export default {
235 // }, 2000); 242 // }, 2000);
236 }, 243 },
237 watch: { 244 watch: {
245 + // // 监听 $route 对象的 query 属性
246 + // '$route.query': {
247 + // handler(newQuery, oldQuery) {
248 + // if (newQuery.marker_id) {
249 +
250 + // }
251 + // },
252 + // immediate: true, // 设置为 true，确保在初始化时也执行一次 handler
253 + // deep: true // 如果 query 是嵌套对象，可以设置 deep 监听深层变化
254 + // }
238 }, 255 },
239 methods: { 256 methods: {
240 initMap() { 257 initMap() {
...@@ -323,6 +340,21 @@ export default { ...@@ -323,6 +340,21 @@ export default {
323 this.map.setZoomAndCenter(this.zoom, this.itemInfo.position); 340 this.map.setZoomAndCenter(this.zoom, this.itemInfo.position);
324 }) 341 })
325 } 342 }
343 + // 导航路径
344 + console.warn(entity_info[i]);
345 + let marker_id = this.$route.query.marker_id;
346 + if (marker_id) {
347 + let test_paths = {
348 + name: 'test',
349 + path: [[117.049724,26.838248],
350 + [117.049564,26.838155],
351 + [117.04941,26.837998],
352 + [117.049233,26.837796],]
353 + }
354 + this.$nextTick(() => {
355 + this.addSafeRoute(test_paths);
356 + });
357 + }
326 }); 358 });
327 this.map.add(this.markerSum); 359 this.map.add(this.markerSum);
328 }, 360 },
...@@ -598,7 +630,10 @@ export default { ...@@ -598,7 +630,10 @@ export default {
598 // $('.van-floating-panel__content').css('borderRadius', '0'); 630 // $('.van-floating-panel__content').css('borderRadius', '0');
599 // this.showClose = true; 631 // this.showClose = true;
600 this.$router.push({ 632 this.$router.push({
601 - path: '/bieyuan/info' 633 + path: '/bieyuan/info',
634 + query: {
635 + id: this.$route.query.id,
636 + }
602 }) 637 })
603 } else { 638 } else {
604 $('.van-floating-panel__content').css('borderRadius', '1.25rem'); 639 $('.van-floating-panel__content').css('borderRadius', '1.25rem');
...@@ -623,6 +658,109 @@ export default { ...@@ -623,6 +658,109 @@ export default {
623 $('.van-floating-panel__content').css('borderRadius', '1.25rem'); 658 $('.van-floating-panel__content').css('borderRadius', '1.25rem');
624 $('.van-floating-panel').css('boxShadow', 'none'); 659 $('.van-floating-panel').css('boxShadow', 'none');
625 this.resetMarkStyle(); 660 this.resetMarkStyle();
661 + },
662 + addSafeRoute({name, path}) { // 新增路径
663 + // 获取对象的第一个键和值
664 + // let firstKey = Object.keys(this.data_paths)[0];
665 + // let firstValue = this.data_paths[firstKey];
666 + // 行动路线
667 + // var path = [
668 + // [120.587645, 31.314833],
669 + // [120.587709, 31.314338],
670 + // [120.588211, 31.314377],
671 + // ];
672 + // console.warn(firstValue);
673 + // var path = firstValue;
674 + // 生成折线地图路径
675 + let current_safe_route = new AMap.Polyline({
676 + path,
677 + isOutline: true,
678 + outlineColor: '#179FB1',
679 + borderWeight: 1,
680 + strokeColor: '#179FB1',
681 + strokeOpacity: 1,
682 + strokeWeight: 3,
683 + // 折线样式还支持 'dashed'
684 + strokeStyle: 'solid',
685 + // strokeStyle是dashed时有效
686 + strokeDasharray: [10, 5],
687 + lineJoin: 'round',
688 + lineCap: 'round',
689 + zIndex: 50
690 + })
691 + this.map.add([current_safe_route]);
692 + this.current_safe_route.push({
693 + key: name,
694 + path: current_safe_route
695 + })
696 + // 设置起始点标记
697 + var marker1 = new AMap.Marker({
698 + icon: new AMap.Icon({
699 + image: 'https://cdn.ipadbiz.cn/bieyuan/map/icon/Ellipse%2013@3x.png',
700 + size: new AMap.Size(15, 15),
701 + // 图标所用图片大小
702 + imageSize: new AMap.Size(15, 15),
703 + // 图标取图偏移量
704 + imageOffset: new AMap.Pixel(0, 0)
705 + }),
706 + position: new AMap.LngLat(path[0][0], path[0][1]), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
707 + anchor: 'bottom-center',
708 + offset: new AMap.Pixel(0, 0)
709 + });
710 + // marker1.setLabel({
711 + // direction: 'right',
712 + // offset: new AMap.Pixel(0, -10), //设置文本标注偏移量
713 + // content: "<div class='info'>起点</div>", //设置文本标注内容
714 + // });
715 + var marker2 = new AMap.Marker({
716 + icon: new AMap.Icon({
717 + image: 'https://cdn.ipadbiz.cn/bieyuan/map/icon/Ellipse%2013@3x.png',
718 + size: new AMap.Size(15, 15),
719 + // 图标所用图片大小
720 + imageSize: new AMap.Size(15, 15),
721 + // 图标取图偏移量
722 + imageOffset: new AMap.Pixel(0, 0)
723 + }),
724 + position: new AMap.LngLat(path[path.length - 1][0], path[path.length - 1][1]), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
725 + anchor: 'bottom-center',
726 + offset: new AMap.Pixel(0, 0)
727 + });
728 + // marker2.setLabel({
729 + // direction: 'right',
730 + // offset: new AMap.Pixel(0, -10), //设置文本标注偏移量
731 + // content: "<div class='info'>终点</div>", //设置文本标注内容
732 + // });
733 + // 新增逃生路线标记
734 + // this.route_safe_marker = [marker1, marker2]
735 + // this.map.add(this.route_safe_marker);
736 + // 新增逃生路线标记
737 + let route_safe_marker = [marker1, marker2]
738 + this.map.add(route_safe_marker);
739 + this.route_safe_marker.push({
740 + key: name,
741 + path: route_safe_marker
742 + });
743 + // 关闭导航提示
744 + this.show_walk_route = false;
745 + },
746 + removeSafeRoute(name) { // 移除地图路线
747 + this.current_safe_route.forEach(item => {
748 + if (item.key === name) {
749 + this.map.remove([item.path]); // 删除地图折线
750 + }
751 + });
752 + // this.map.remove(this.route_safe_marker); // 删除起始点标记
753 + this.route_safe_marker.forEach(item => {
754 + if (item.key === name) {
755 + this.map.remove(item.path); // 删除起始点标记
756 + }
757 + });
758 + // 关闭导航提示
759 + this.show_walk_route = true;
760 + },
761 + onRoute (path) {
762 + // 模拟新增路线
763 + this.addSafeRoute(path);
626 } 764 }
627 } 765 }
628 } 766 }
......