fix 导航路线兼容多条显示

hookehuyr
Commit 90ad85c0d210b7bb756fada826f94813c89ddd0a 90ad85c0 1 parent 49a14060
Showing 1 changed file with 53 additions and 21 deletions
src/views/index.vue
--- a/src/views/index.vue
View file @90ad85c
+++ b/src/views/index.vue
View file @90ad85c
 <!--
  * @Date: 2023-05-19 14:54:27
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-08-19 17:42:32
+ * @LastEditTime: 2024-08-20 16:58:48
  * @FilePath: /map-demo/src/views/index.vue
  * @Description: 公众地图主体页面
 -->
@@ -48,12 +48,12 @@
           <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A%E4%BD%8Dloc@2x.png" size="1.5rem"
             style="vertical-align: middle;" />
         </div> -->
-        <div v-if="Object.keys(data_paths)?.length">
+        <div v-for="(item, index) in data_path_list" :key="index">
-          <div v-if="open_safe_route" class="item" @click="handleSafeRoute(true)">
+          <div v-if="item.status" class="item" @click="handleSafeRoute(true, item)">
             <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E7%BA%BF%E8%B7%AF01.png" size="1.5rem"
               style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);" />
           </div>
-          <div v-else class="item" @click="handleSafeRoute(false)">
+          <div v-else class="item" @click="handleSafeRoute(false, item)">
             <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E7%BA%BF%E8%B7%AF02.png" size="1.5rem"
               style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);" />
           </div>
@@ -201,7 +201,7 @@ export default {
       current_lng: '',
       current_lat: '',
       current_route: '',
-      current_safe_route: '',
+      current_safe_route: [],
       // show_popup: false,
       dialog_show: false,
       dialog_text: '',
@@ -247,6 +247,7 @@ export default {
       data_zooms: '', // 接口获取-地图默认缩放范围
       data_rotation: 0, // 接口获取-地图旋转角度
       data_paths: {}, // 接口获取-地图导航路径
+      data_path_list: [], // 接口获取-地图导航路径
     }
   },
   async mounted() {
@@ -263,6 +264,16 @@ export default {
     this.data_rotation = data.map.rotation; // 地图旋转角度
     this.data_zooms = data.map.zooms.map(item => Number(item)); // 地图默认缩放范围
     this.data_paths = data.map.path ? data.map.path : {}; // 地图默认导航路径
+    if (data.map.path) {
+      for (const key in data.map.path) {
+        const element = data.map.path[key];
+        this.data_path_list.push({
+          name: key,
+          path: element,
+          status: true
+        })
+      }
+    }
     // 初始化地图
     this.initMap();
     // this.setMapBoundary();
@@ -598,10 +609,10 @@ export default {
         this.map.setZoom(zoom - 1)
       }
     },
-    addSafeRoute() { // 新增路径
+    addSafeRoute({name, path}) { // 新增路径
       // 获取对象的第一个键和值
-      let firstKey = Object.keys(this.data_paths)[0];
+      // let firstKey = Object.keys(this.data_paths)[0];
-      let firstValue = this.data_paths[firstKey];
+      // let firstValue = this.data_paths[firstKey];
       // 行动路线
       // var path = [
       //   [120.587645, 31.314833],
@@ -609,9 +620,9 @@ export default {
       //   [120.588211, 31.314377],
       // ];
       // console.warn(firstValue);
-      var path = firstValue;
+      // var path = firstValue;
       // 生成折线地图路径
-      this.current_safe_route = new AMap.Polyline({
+      let current_safe_route = new AMap.Polyline({
         path,
         isOutline: true,
         outlineColor: '#fba601',
@@ -627,7 +638,11 @@ export default {
         lineCap: 'round',
         zIndex: 50
       })
-      this.map.add([this.current_safe_route]);
+      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({
@@ -666,12 +681,28 @@ export default {
         content: "<div class='info'>终点</div>", //设置文本标注内容
       });
       // 新增逃生路线标记
-      this.route_safe_marker = [marker1, marker2]
+      // this.route_safe_marker = [marker1, marker2]
-      this.map.add(this.route_safe_marker);
+      // 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
+      })
     },
-    removeSafeRoute() { // 移除地图路线
+    removeSafeRoute({name}) { // 移除地图路线
-      this.map.remove([this.current_safe_route]); // 删除地图折线
+      this.current_safe_route.forEach(item => {
-      this.map.remove(this.route_safe_marker); // 删除起始点标记
+        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); // 删除起始点标记
+        }
+      });
     },
     // addNavRoute (path) { // 新增导航路径
     //   // 生成折线地图路径
@@ -1026,14 +1057,15 @@ export default {
         this.dialog_text = '内部设施';
       }
     },
-    handleSafeRoute(status) { // 打开/关闭逃生路线线
+    handleSafeRoute(status, item) { // 打开/关闭逃生路线线
       if (status) {
-        this.addSafeRoute()
+        this.addSafeRoute(item)
-        this.open_safe_route = false;
+        // this.open_safe_route = false;
       } else {
-        this.removeSafeRoute()
+        this.removeSafeRoute(item)
-        this.open_safe_route = true;
+        // this.open_safe_route = true;
       }
+      item.status = !status;
     },
     handleNavPopup() {
       this.show_nav_popup = !this.show_nav_popup