Skip to content

React POI 点击弹窗

打开即自动选中一个 POI 展示弹窗效果;点击地图上任意店铺/设施,高亮并切换弹窗内容,可发起导航。

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

React POI 点击弹窗fmap-react
点击「运行」查看示例效果

要点

  • FMapViewonMapClick(model, event):点击命中要素时返回 FMapModel,点空白处返回 null
  • FMapPOIPopup 自带底部居中定位与「导航到此」入口,poi 为 null 时不显示。
  • 自动演示:加载后 search.search() 取一个 POI 直接 setPoi + focus(),无需等用户点击。
  • FMapFloorButtons 订阅实时楼层:切换楼层、导航自动切层时高亮自动跟随。
  • FMapHighlighter 负责可复位的高亮,关闭弹窗时 clear()

基于蜂鸟视图 Fengmap SDK 构建