React 完整导航
搜索 POI 并依次选择两个点,自动规划路线、全览并模拟行走——一个浓缩版的室内导航应用。
ℹ️ React 示例在浏览器内直接编译运行:JSX 由 Babel Standalone 转换,react/antd 从 esm.sh 加载,
@indoor-map/fmap-js、@indoor-map/fmap-react使用文档站自托管构建产物,与仓库源码保持同步。
React 完整导航fmap-react
点击「运行」查看示例效果
要点
useFMap()从上下文直接取search、navigation、marker、loaded。- 搜索走
search.search({ keyword, fuzzy: true }),结果交给FMapSearchResults渲染;选中即收集为导航点,凑齐两个自动navigation.route()。 - 路线由
route()内部绘制(带方向箭头),起终点用addTextMarker(带level);重新规划前marker.clearAll()清理上一轮标记。 - 模拟导航
simulate({ followPosition: false, speed: 3 }):关闭相机跟随保持全览视角,onWalking实时更新剩余距离。 - 定位图标用
setLocationMarker()设置(需在route()之前调用)。 - 完整业务版(首页 / 历史记录 / 地图选点 / 途经点拖拽)见仓库内
indoor-nav应用。