可以点击地图导航

agv_app/static/js/setting.js

@@ -1033,6 +1033,40 @@ const app = createApp({
       }
     },
 
+    // === 点击地图直接导航 ===
+    async onMapClick(e) {
+      if (!this.agvConnected) { alert('请先连接AGV'); return }
+      if (!this.nav2Available) { alert('Nav2 不可用，请先连接AGV'); return }
+      // 计算点击位置相对于图片的百分比
+      const rect = e.target.getBoundingClientRect()
+      const pctX = (e.clientX - rect.left) / rect.width   // 0~1 from left
+      const pctY = (e.clientY - rect.top)  / rect.height  // 0~1 from top
+      if (!this.mapMeta) {
+        alert('地图元数据未加载，请刷新页面'); return
+      }
+      const { resolution, origin, width, height } = this.mapMeta
+      // 反向计算地图坐标
+      const mapX = origin[0] + pctX * resolution * width
+      const mapY = origin[1] + (1 - pctY) * resolution * height  // Y轴翻转
+      const confirmed = confirm(`导航到点击位置\n坐标: (${mapX.toFixed(2)}, ${mapY.toFixed(2)})\n\n确认发送导航指令？`)
+      if (!confirmed) return
+      try {
+        var res = await fetch(API + '/api/navigate/to', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ x: mapX, y: mapY })
+        })
+        var data = await res.json()
+        if (data.ok) {
+          alert('✅ 导航已启动')
+        } else {
+          alert('❌ 导航失败: ' + (data.error || '未知错误'))
+        }
+      } catch (e) {
+        alert('❌ 请求失败: ' + e.message)
+      }
+    },
+
     // === 导航到点位 ===
     async navigateToPoint() {
       if (!this.pointEditor.x && !this.pointEditor.y) {

agv_app/templates/setting.html

@@ -50,7 +50,7 @@
         <section class="card" v-if="mapLoaded" style="margin-top:16px">
           <h2>地图可视化</h2>
           <div class="map-container" style="position:relative;background:#111;border-radius:8px;overflow:hidden">
-            <img :src="mapImageUrl" @error="onMapError" style="width:100%;display:block">
+            <img :src="mapImageUrl" @error="onMapError" @click="onMapClick" style="width:100%;display:block;cursor:crosshair" title="点击地图导航到该位置">
             <!-- 地图覆盖层：显示点位坐标 -->
             <div class="map-overlay">
               <!-- 点位坐标点 -->