✨ feat(简约模版): 详情页新增步行导航功能

hookehuyr
Commit f0496fb39f684efe2fe1cfe80f16e99084ff8cd8 f0496fb3 1 parent f1aa9ab9
Showing 4 changed files with 121 additions and 4 deletions
.eslintrc-auto-import.json
src/auto-imports.d.ts
src/views/by/info.vue
src/views/by/map.vue
--- a/.eslintrc-auto-import.json
View file @f0496fb
+++ b/.eslintrc-auto-import.json
View file @f0496fb
 {
   "globals": {
     "EffectScope": true,
+    "ElMessage": true,
     "computed": true,
     "createApp": true,
     "customRef": true,
--- a/src/auto-imports.d.ts
View file @f0496fb
+++ b/src/auto-imports.d.ts
View file @f0496fb
@@ -2,6 +2,7 @@
 export {}
 declare global {
   const EffectScope: typeof import('vue')['EffectScope']
+  const ElMessage: typeof import('element-plus/es')['ElMessage']
   const computed: typeof import('vue')['computed']
   const createApp: typeof import('vue')['createApp']
   const customRef: typeof import('vue')['customRef']
--- a/src/views/by/info.vue
View file @f0496fb
+++ b/src/views/by/info.vue
View file @f0496fb
 <!--
  * @Date: 2024-09-15 22:08:49
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-02-10 16:11:47
+ * @LastEditTime: 2025-03-06 09:50:03
  * @FilePath: /map-demo/src/views/by/info.vue
  * @Description: 文件描述
 -->
@@ -31,6 +31,7 @@
               <van-icon v-else name="https://cdn.ipadbiz.cn/bieyuan/map/icon/%E8%AF%AD%E9%9F%B32@3x.png" size="1.65rem" />
             </div>
             <div v-if="page_details.path?.length > 1" @click="goTo()" class="info-btn">前往</div>
+            <div @click="goToWalk()" class="info-btn">前往</div>
           </div>
         </div>
         <div class="info-sub-title">{{ page_details.note }}</div>
@@ -283,7 +284,7 @@ const outerStopAudio = () => {
   audio.value.pause();
 }
-const emit = defineEmits(["closeFloat", 'route']);
+const emit = defineEmits(["closeFloat", 'route', 'walkRoute']);
 const show_toast = ref(false);
 const toast_text = ref('');
@@ -312,6 +313,41 @@ const goTo = () => { // 打开标记地图显示
   }
 }
+const goToWalk = async () => { // 打开步行导航地图显示
+  // 没有关联导航提示
+  try {
+    const isLocationEnabled = await checkWxLocation();
+    if (!isLocationEnabled) {
+      // 提示用户开启定位
+      show_toast.value = true;
+      toast_text.value = '请开启手机定位功能';
+      return;
+    }
+  } catch (err) {
+    console.error('获取定位状态失败:', err);
+  }
+  //
+  if ($router.currentRoute.value.path === '/by/info') { // 详情页
+    $router.push({
+      path: '/by',
+      query: {
+        id: $route.query.id,
+        marker_id: $route.query.marker_id
+      }
+    })
+  } else { // 地图页
+    //
+    emit("closeFloat", false);
+    //
+    if (page_details.value?.position.length) {
+      emit("walkRoute", {name: '步行导航', point: [+page_details.value?.position[0], +page_details.value?.position[1]]});
+    } else {
+      show_toast.value = true;
+      toast_text.value = '该标记点没有关联导航';
+    }
+  }
+}
+
 const goBack = () => { // 返回首页
   $router.push({
     path: '/by',
@@ -447,6 +483,24 @@ const onStatusAudioList = (status) => { // 音频列表组件，状态改变
   //   show_audio.value = false;
   // }
 }
+
+const checkWxLocation = () => {
+  return new Promise((resolve, reject) => {
+    wx.getLocation({
+      type: 'gcj02', // 默认为 wgs84 返回 gps 坐标，gcj02 返回可用于 wx.openLocation 的坐标
+      success: (res) => {
+        resolve(true); // 已开启定位
+      },
+      fail: (err) => {
+        if (err.errMsg.indexOf('deny') > -1) {
+          resolve(false); // 未开启定位
+        } else {
+          reject(err); // 其他错误
+        }
+      }
+    });
+  });
+}
 </script>
 <style lang="less">
--- a/src/views/by/map.vue
View file @f0496fb
+++ b/src/views/by/map.vue
View file @f0496fb
 <!--
  * @Date: 2023-05-19 14:54:27
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-03-05 17:52:15
+ * @LastEditTime: 2025-03-06 10:31:16
  * @FilePath: /map-demo/src/views/by/map.vue
  * @Description: 公众地图主体页面
 -->
 <template>
   <div ref="root" style="height: 100vh; position: relative; overflow: hidden;">
     <div id="container"></div>
+    <!-- 添加导航面板容器 -->
+    <div id="walking-panel" style="position: absolute; bottom: 1rem; left: 1rem; padding: 1rem;"></div>
     <div style="position: absolute; top: 2rem; right: 1rem; display: flex; flex-direction: column;">
       <!-- <van-icon size="2rem" name="search" color="#DD7850" style="margin-bottom: 1rem;" /> -->
       <van-image
@@ -42,7 +44,7 @@
             <button @click="show = false">关闭</button>
           </div>
         </template> -->
-        <page-info ref="pageInfo" :info="itemInfo" :height="info_height" @close-float="onCloseFloat" @route="onRoute"></page-info>
+        <page-info ref="pageInfo" :info="itemInfo" :height="info_height" @close-float="onCloseFloat" @route="onRoute" @walk-route="onWalkRoute"></page-info>
         <!-- <div v-if="showClose" @click="closeFloatPanel" class="close-float-panel">
           <van-icon name="arrow-left" color="#FFF" size="1.5rem" />
         </div> -->
@@ -96,6 +98,7 @@ import audioBackground1 from '@/components/audioBackground1.vue'
 import { mapState, mapActions } from 'pinia'
 import { mainStore } from '@/store'
 import { parseQueryString } from '@/utils/tools'
+import AMapLoader from '@amap/amap-jsapi-loader'
 const GPS = {
   PI: 3.14159265358979324,
@@ -153,6 +156,11 @@ const GPS = {
   }
 };
+// 关键安全配置
+window._AMapSecurityConfig = {
+  securityJsCode: '8602057c4c8dae5bed9a240c0582c46f', // 替换为你的密钥
+}
+
 export default {
   components: { pageInfo, audioBackground1 },
   data() {
@@ -267,9 +275,15 @@ export default {
       toast_text: '',
       data_logo: '',
       data_layers: [],
+      walking: '',
     }
   },
   async mounted() {
+    const AMap = await AMapLoader.load({
+      key: '381c6763e1fefd810fbab697f470149c', // 控制台获取
+      version: '2.0', // 指定API版本
+      plugins: ['AMap.ElasticMarker','AMap.ImageLayer','AMap.ToolBar','AMap.IndoorMap','AMap.Walking','AMap.Geolocation']    // 必须加载步行导航插件
+    })
     const code = this.$route.query.id;
     const { data } = await mapAPI({ i: code });
     this.navBarList = data.list; // 底部导航条
@@ -342,6 +356,14 @@ export default {
     //   // 浮动面板样式
     //   $('.van-floating-panel__content').css('borderRadius', '1.5rem');
     // }, 2000);
+    // 初始化步行导航插件时指定面板容器
+    this.walking = new AMap.Walking({
+      map: this.map,
+      // panel: 'walking-panel', // 必须指定存在的DOM元素ID
+      hideMarkers: false, // 设置隐藏路径规划的起始点图标
+      isOutline: true, // 使用map属性时，绘制的规划线路是否显示描边
+      autoFitView: true, // 是否自动调整地图视野到显示的路线
+    });
   },
   watch: {
     // // 监听 $route 对象的 query 属性
@@ -941,6 +963,45 @@ export default {
       // 定位到当前位置中心
       this.map.setZoomAndCenter(this.zoom, this.data_center);
     },
+    async onWalkRoute (position) {
+      await this.$nextTick(); // 等待DOM更新
+      // 步行导航
+      // let walking = new AMap.Walking({
+      //   map: this.map,
+      //   panel: "panel"
+      // });
+
+      // 确保参数格式正确
+      const startPoint = [this.current_lng, this.current_lat]; // 起点
+      const endPoint = position.point; // 终点
+
+      // 参数检查
+      if (!startPoint[0] || !startPoint[1]) {
+        this.show_toast = true;
+        this.toast_text = '无法获取当前位置，请确保已开启定位功能';
+        return;
+      }
+
+      if (!endPoint[0] || !endPoint[1]) {
+        this.show_toast = true;
+        this.toast_text = '目的地坐标不完整';
+        return;
+      }
+
+      // 转换为 LngLat 对象
+      const start = new AMap.LngLat(startPoint[0], startPoint[1]);
+      const end = new AMap.LngLat(endPoint[0], endPoint[1]);
+
+      // 规划步行路线
+      this.walking.search(start, end, (status, result) => {
+        if (status === 'complete') {
+          console.log('步行路线规划成功');
+        } else {
+          console.error('步行路线规划失败:', status, result);
+          ElMessage.error('步行路线规划失败，请稍后重试');
+        }
+      });
+    },
     handleLocation(status) { // 打开/关闭 当前定位
       if (status) {
         this.setLocation()