Skip to content

React 完整导航

搜索 POI 并依次选择两个点,自动规划路线、全览并模拟行走——一个浓缩版的室内导航应用。

ℹ️ React 示例在浏览器内直接编译运行:JSX 由 Babel Standalone 转换,react/antd 从 esm.sh 加载,@indoor-map/fmap-js@indoor-map/fmap-react 使用文档站自托管构建产物,与仓库源码保持同步。

React 完整导航fmap-react
点击「运行」查看示例效果

要点

  • useFMap() 从上下文直接取 searchnavigationmarkerloaded
  • 搜索走 search.search({ keyword, fuzzy: true }),结果交给 FMapSearchResults 渲染;选中即收集为导航点,凑齐两个自动 navigation.route()
  • 路线由 route() 内部绘制(带方向箭头),起终点用 addTextMarker(带 level);重新规划前 marker.clearAll() 清理上一轮标记。
  • 模拟导航 simulate({ followPosition: false, speed: 3 }):关闭相机跟随保持全览视角,onWalking 实时更新剩余距离。
  • 定位图标用 setLocationMarker() 设置(需在 route() 之前调用)。
  • 完整业务版(首页 / 历史记录 / 地图选点 / 途经点拖拽)见仓库内 indoor-nav 应用。

基于蜂鸟视图 Fengmap SDK 构建