FMapNavigationPanel 导航面板

FMapNavigationPanel 是受控的多途经点导航面板，支持输入规划、途经点增删与拖拽排序、路线策略切换、模拟导航，以及规划完成后的紧凑结果页。

import { FMapNavigationPanel } from '@indoor-map/fmap-react';

<FMapNavigationPanel
  start={start}
  end={end}
  waypoints={waypoints}
  onStartChange={setStart}
  onEndChange={setEnd}
  onWaypointChange={updateWaypoint}
  onStartSelect={handleSelect('start')}
  onEndSelect={handleSelect('end')}
  onWaypointSelect={handleSelect('waypoint')}
  onAddWaypoint={addWaypoint}
  onRemoveWaypoint={removeWaypoint}
  onSwap={swapStartEnd}
  onDragStart={...}
  onDragEnter={...}
  onDragEnd={...}
  onDragOver={...}
  dragItemIndex={dragIndex}
  strategy="optimal"
  onStrategyChange={setStrategy}
  route={route}
  onComplete={planRoute}
  onStartSimulation={startSimulation}
  onMapPick={openMapPick}
  onNavFieldFocus={setFocusField}
  mode={route ? 'result' : 'plan'}
/>;

核心 Props

属性	说明
start / end / waypoints	起终点与途经点（NavigationPanelPoint，与 NavigationPoint 兼容）
onStartChange / onEndChange / onWaypointChange	点位变更回调
onStartSelect / onEndSelect / onWaypointSelect	从搜索结果选中 POI 的回调
onAddWaypoint / onRemoveWaypoint / onSwap	途经点操作
onDragStart / onDragEnter / onDragEnd / onDragOver / dragItemIndex	途经点拖拽排序
strategy / onStrategyChange	路线策略（最优/楼梯/电梯等）
route / onComplete / onStartSimulation	规划结果、完成规划、模拟导航
onMapPick / onNavFieldFocus	地图选点联动
mode	plan（输入规划）/ result（结果页）
maxWaypoints	途经点最大数量，默认 3

配套组件：FMapNavigationHeader（顶部起终点输入条）、FMapWaypointInput（单个途经点输入）、FMapRouteDetail（路线步骤详情）、FMapRouteStrategySelector（策略胶囊选择器）。

相关示例

• React 完整导航