FMapSearch 搜索

FMapSearch 是完整的搜索页组件：搜索框（防抖）、结果列表、历史记录、快捷入口（家/公司/收藏）与隐私模式。

import { FMapProvider, FMapView, FMapSearch, FMapSearchResults } from '@indoor-map/fmap-react';
import { useState } from 'react';
import type { FMapModel } from '@indoor-map/fmap-js';

function SearchPage() {
  const [results, setResults] = useState<FMapModel[]>([]);
  const [selected, setSelected] = useState<FMapModel | null>(null);

  return (
    <FMapProvider options={{ appName: '...', key: '...', mapID: '...' }}>
      <FMapView style={{ width: '100%', height: '100vh' }} />
      <FMapSearch
        onSearch={(keyword, list) => setResults(list)}
        onResultClick={(item) => setSelected(item)}
      />
      {results.length > 0 && (
        <FMapSearchResults
          results={results}
          onResultClick={(model) => setSelected(model)}
          onClose={() => setResults([])}
        />
      )}
    </FMapProvider>
  );
}

Props

属性	类型	说明
placeholder	string	占位文本
onSearch	(keyword, results) => void	搜索完成回调
onResultClick	(item: FMapModel) => void	结果点击回调
onHistoryClick	(keyword: string) => void	历史记录点击回调
levels	number[]	搜索楼层范围
showHistory	boolean	是否显示历史记录
showQuickAccess	boolean	是否显示快捷入口
homeAddress / workAddress	{ name, address? }	家 / 公司地址
privacyMode	boolean	隐私模式
onPrivacyModeChange	(enabled) => void	隐私模式切换回调
style	CSSProperties	自定义样式

相关示例

• React 完整导航