调整导航功能

hookehuyr
Commit 76d5aa90c3c0fbdac6f6c881a5fb8bf1c390a4b3 76d5aa90 1 parent f614f38c
Showing 2 changed files with 83 additions and 50 deletions
src/components/InfoWindow.vue
src/views/index.vue
--- a/src/components/InfoWindow.vue
View file @76d5aa9
+++ b/src/components/InfoWindow.vue
View file @76d5aa9
@@ -28,13 +28,13 @@
         </div>
       </div>
       <div class="van-hairline--top" style="margin: 1rem 0;">
-        <div @click="goTo()" style="width: 50%; float: left; text-align: center; margin-top: 1rem;"
+        <div @click="goToUrl()" style="width: 50%; float: left; text-align: center; margin-top: 1rem;"
           class="van-hairline--right">
           <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E5%89%8D%E5%BE%80@2x.png" size="1.5rem" color="#FFF"
             style="vertical-align: bottom;" />&nbsp;
           <span style="color: #AB8F57; font-size: 1.1rem;">详情</span>
         </div>
-        <div style="width: 50%; float: left; text-align: center; margin-top: 1rem;">
+        <div @click="goToLocation()" style="width: 50%; float: left; text-align: center; margin-top: 1rem;">
           <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E5%89%8D%E5%BE%80@2x.png" size="1.5rem" color="#FFF"
             style="vertical-align: bottom;" />&nbsp;
           <span style="color: #AB8F57; font-size: 1.1rem;">前往</span>
@@ -200,7 +200,7 @@ export default {
       this.audio.pause();
       this.is_play = false;
     },
-    goTo(url) {
+    goToUrl(url) {
       location.href = this.info.details[this.isActive].url;
     },
     handleTitle (index) {
@@ -226,6 +226,9 @@ export default {
           }, 1000);
         }, 100);
       }
+    },
+    goToLocation () {
+      this.$emit('onLocation', this.info.position)
     }
   }
 }
--- a/src/views/index.vue
View file @76d5aa9
+++ b/src/views/index.vue
View file @76d5aa9
 <!--
  * @Date: 2023-05-19 14:54:27
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-06-06 17:19:52
+ * @LastEditTime: 2023-06-07 10:34:46
  * @FilePath: /map-demo/src/views/index.vue
  * @Description: 文件描述
 -->
@@ -27,44 +27,33 @@
       <van-popup v-model:show="show_nav_popup" position="bottom" duration="0" :overlay="false"
         :style="{ padding: '1rem', bottom: '4.5rem' }">
         <div style="text-align: left;">
-          <div v-for="(item, index) in navList[navName]" :key="index"  @click="positionMarker(item)" style="margin-bottom: 1rem; font-size: 1.15rem;">
+          <div v-for="(item, index) in navList[navName]" :key="index" @click="positionMarker(item)"
+            style="margin-bottom: 1rem; font-size: 1.15rem;">
             <van-icon name="fire-o" color="red" />&nbsp;&nbsp;{{ item.name }}
           </div>
         </div>
       </van-popup>
     </div>
-    <!-- <div class="safe-route-wrapper">
-      <span v-if="open_safe_route" @click="handleSafeRoute(true)">打开安全路线</span>
-      <span v-else @click="handleSafeRoute(false)">关闭安全路线</span>
-    </div> -->
-    <!-- <div class="tool-bar-wrapper">
-      <div style="display: flex; flex-direction: column;align-items: center;justify-content: center;">
-        <van-icon name="plus" style="margin-bottom: 1rem;" @click="setZoom('plus')" />
-        <van-icon name="minus" style="margin-bottom: 1rem;" @click="setZoom('minus')" />
-        <van-icon name="aim" @click="setLocation" />
-      </div>
-    </div> -->
     <div class="operate-bar-wrapper">
       <div class="box-wrapper">
         <div class="item" @click="setLocation">
-          <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A%E4%BD%8Dloc@2x.png" size="1.5rem" style="vertical-align: middle;" />
+          <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A%E4%BD%8Dloc@2x.png" size="1.5rem"
-        </div>
+            style="vertical-align: middle;" />
-        <div v-if="show_walk_route" class="item" @click="setWalkRoute">
-          <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E7%BA%BF%E8%B7%AF@2x.png" size="1.25rem" style="vertical-align: middle;" />
-        </div>
-        <div v-else class="item" @click="removeWalkRoute">
-          <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E7%BA%BF%E8%B7%AF@2x.png" size="1.25rem" style="vertical-align: middle;" />
         </div>
         <div v-if="open_safe_route" class="item" @click="handleSafeRoute(true)">
-          <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E7%BA%BF%E8%B7%AF@2x.png" size="1.25rem" style="vertical-align: middle;" />
+          <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E7%BA%BF%E8%B7%AF@2x.png" size="1.25rem"
+            style="vertical-align: middle;" />
         </div>
         <div v-else class="item" @click="handleSafeRoute(false)">
-          <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E7%BA%BF%E8%B7%AF@2x.png" size="1.25rem" style="vertical-align: middle;" />
+          <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E7%BA%BF%E8%B7%AF@2x.png" size="1.25rem"
+            style="vertical-align: middle;" />
         </div>
       </div>
     </div>
-    <!-- <div style="position: fixed; bottom: 0; height: 2rem; width: 100%; background-color: white; z-index: 999;"></div> -->
+    <div v-if="!show_walk_route" @click="removeWalkRoute" style="position: fixed; bottom: 8rem; left: 48%; z-index: 999; background: rgba(86, 65, 23, 0.8); color: white; border-radius: 10px; padding: 5px 12px; font-size: 0.8rem;">
+      关闭步行导航
+    </div>
     <van-popup v-model:show="show_popup" position="bottom" :overlay="true" :style="{ padding: '1rem', height: '100%' }">
       <van-icon name="cross" size="1.35rem" @click="show_popup = false" style="float: right; color: gray;" />
@@ -85,9 +74,12 @@
     <!-- 自定义组件InfoWindow，初始时需要隐藏 -->
     <!-- 隐藏不要使用v-if，因为我们需要渲染完成后的原生html结构作为信息框的dom对象使用 -->
-    <InfoWindow v-show="showInfoWindow" ref="infoWindow" :info-window="infoWindow" :info="itemInfo" :rect="rect"></InfoWindow>
+    <InfoWindow v-show="showInfoWindow" ref="infoWindow" :info-window="infoWindow" :info="itemInfo" :rect="rect"
-    <InfoWindowLite v-show="showInfoWindowLite" ref="infoWindowLite" :info-window="infoWindowLite" :info="itemInfo" :rect="rect"></InfoWindowLite>
+      @onLocation="infoWindowLocation"></InfoWindow>
-    <InfoWindowWarn v-show="showInfoWindowWarn" ref="infoWindowWarn" :info-window="infoWindowWarn" :info="itemInfo" :rect="rect"></InfoWindowWarn>
+    <InfoWindowLite v-show="showInfoWindowLite" ref="infoWindowLite" :info-window="infoWindowLite" :info="itemInfo"
+      :rect="rect"></InfoWindowLite>
+    <InfoWindowWarn v-show="showInfoWindowWarn" ref="infoWindowWarn" :info-window="infoWindowWarn" :info="itemInfo"
+      :rect="rect"></InfoWindowWarn>
   </div>
 </template>
@@ -259,21 +251,21 @@ export default {
         })
       }
     },
-    showInfoWindow (val) {
+    showInfoWindow(val) {
       if (val) {
         // 元素的大小及其相对于视口的位置
         const rect = useRect(this.$refs.root);
         this.rect = rect;
       }
     },
-    showInfoWindowLite (val) {
+    showInfoWindowLite(val) {
       if (val) {
         // 元素的大小及其相对于视口的位置
         const rect = useRect(this.$refs.root);
         this.rect = rect;
       }
     },
-    showInfoWindowWarn (val) {
+    showInfoWindowWarn(val) {
       if (val) {
         // 元素的大小及其相对于视口的位置
         const rect = useRect(this.$refs.root);
@@ -627,6 +619,12 @@ export default {
     hidePublic() {
       this.map.remove(this.facilities);
     },
+    isPointInRing () { // 是否在景区范围
+      let isPointInRing = AMap.GeometryUtil.isPointInRing([this.current_lng, this.current_lat], [
+        [120.585111, 31.316084], [120.585111, 31.316084], [120.589488, 31.313197], [120.585422, 31.313005]
+      ]);
+      return isPointInRing
+    },
     setLocation() { // 开启定位服务
       // this.map.addControl(this.geolocation); // 添加定位图标 自动跳转当前位置
       if (!this.current_lng || !this.current_lat) {
@@ -640,10 +638,7 @@ export default {
         // 定位到地图中心-西园寺
         this.map.setCenter([120.587334, 31.314823]);
         // 判断是否在范围内
-        let isPointInRing = AMap.GeometryUtil.isPointInRing([this.current_lng, this.current_lat], [
+        if (!this.isPointInRing()) {
-          [120.585111, 31.316084], [120.585111, 31.316084], [120.589488, 31.313197], [120.585422, 31.313005]
-        ]);
-        if (!isPointInRing) {
           this.dialog_show = true;
         }
       }
@@ -716,11 +711,11 @@ export default {
           imageOffset: new AMap.Pixel(0, 0)
         }),
         position: new AMap.LngLat(120.587506, 31.313787),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
-        anchor:'bottom-center',
+        anchor: 'bottom-center',
         offset: new AMap.Pixel(0, 0)
       });
       marker1.setLabel({
-        direction:'right',
+        direction: 'right',
         offset: new AMap.Pixel(0, -10),  //设置文本标注偏移量
         content: "<div class='info'>起点</div>", //设置文本标注内容
       });
@@ -734,11 +729,11 @@ export default {
           imageOffset: new AMap.Pixel(0, 0)
         }),
         position: new AMap.LngLat(120.586825, 31.314543),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
-        anchor:'bottom-center',
+        anchor: 'bottom-center',
         offset: new AMap.Pixel(0, 0)
       });
       marker2.setLabel({
-        direction:'right',
+        direction: 'right',
         offset: new AMap.Pixel(0, -10),  //设置文本标注偏移量
         content: "<div class='info'>终点</div>", //设置文本标注内容
       });
@@ -883,7 +878,7 @@ export default {
       // 点击空白处 关闭弹框
       this.closeInfoWindow()
     },
-    setWalkRoute() {
+    setWalkRoute(start = { lng: 120.587799, lat: 31.313276 }, end = { lng: 120.587912, lat: 31.315169 }) {
       //步行导航
       let walking_CallBack = (result) => {
         if (result.type === 'complete') {
@@ -899,7 +894,7 @@ export default {
         }); //构造步行导航类
         AMap.Event.addListener(this.walk_route, "complete", walking_CallBack); //返回导航查询结果
         //根据起、终点坐标规划步行路线
-        this.walk_route.search(new AMap.LngLat(120.587799, 31.313276), new AMap.LngLat(120.587912, 31.315169));
+        this.walk_route.search(new AMap.LngLat(start.lng, start.lat), new AMap.LngLat(end.lng, end.lat));
       });
       this.show_walk_route = false;
     },
@@ -907,6 +902,17 @@ export default {
       this.walk_route.clear();
       this.show_walk_route = true;
     },
+    infoWindowLocation(position) { // 监听前往按钮回调
+      // // 判断是否在范围内
+      // if (!this.isPointInRing()) {
+      //   this.dialog_show = true;
+      // } else {
+      //   this.setWalkRoute({ lng: this.current_lng, lat: this.current_lat }, { lng: position[0], lat: position[1] })
+      // }
+      // 测试
+      this.closeInfoWindow(); // 关闭弹框
+      this.setWalkRoute({ lng: 120.59014, lat: 31.310306 }, { lng: position[0], lat: position[1] });
+    },
     setNavLayer({ key }, index) { // 选择地图图层显示
       this.isActive = index;
       if (key === 'spot') {
@@ -988,7 +994,12 @@ export default {
         offset: new AMap.Pixel(0, -30),
       })
       this.infoWindow = infoWindow;
-      this.itemInfo = item
+      this.itemInfo = item;
+      this.itemInfo.map = this.map;
+      this.itemInfo.LngLat = {
+        lng: this.current_lng,
+        lat: this.current_lat,
+      }
       // 信息窗口打开
       infoWindow.open(this.map, item.position)
     },
@@ -1005,7 +1016,12 @@ export default {
         offset: new AMap.Pixel(0, -30),
       })
       this.infoWindowLite = infoWindowLite;
-      this.itemInfo = item
+      this.itemInfo = item;
+      this.itemInfo.map = this.map;
+      this.itemInfo.LngLat = {
+        lng: this.current_lng,
+        lat: this.current_lat,
+      }
       // 信息窗口打开
       infoWindowLite.open(this.map, item.position)
     },
@@ -1022,11 +1038,16 @@ export default {
         offset: new AMap.Pixel(0, -30),
       })
       this.infoWindowWarn = infoWindowWarn;
-      this.itemInfo = item
+      this.itemInfo = item;
+      this.itemInfo.map = this.map;
+      this.itemInfo.LngLat = {
+        lng: this.current_lng,
+        lat: this.current_lat,
+      }
       // 信息窗口打开
-      infoWindowWarn.open(this.map, item.position)
+      infoWindowWarn.open(this.map, item.position);
     },
-    closeInfoWindow () {
+    closeInfoWindow() {
       if (this.showInfoWindow) {
         this.$refs['infoWindow'].close();
         // 打开缩放
@@ -1120,13 +1141,21 @@ export default {
   z-index: 999;
   // padding: 0.5rem 0;
   padding-bottom: 0.5rem;
+
   .nav-bar-content {
-    display: flex; overflow-x: scroll; overflow-y: hidden; -webkit-overflow-scrolling: touch; position: relative;
+    display: flex;
+    overflow-x: scroll;
+    overflow-y: hidden;
+    -webkit-overflow-scrolling: touch;
+    position: relative;
   }
+
   .item {
     padding-top: 0.5rem;
     color: #888;
-    width: 21.5%; flex-shrink: 0; padding-top: 1rem;
+    width: 21.5%;
+    flex-shrink: 0;
+    padding-top: 1rem;
   }
   .checked {
@@ -1193,7 +1222,8 @@ export default {
   overflow: -moz-scrollbars-none;
 }
-.van-dialog__confirm, .van-dialog__confirm:active {
+.van-dialog__confirm,
+.van-dialog__confirm:active {
   color: #AB8F57;
 }
 </style>