快速开始

安装

pnpm add @indoor-map/fmap-js
# 或
npm install @indoor-map/fmap-js

React 项目额外安装组件库：

pnpm add @indoor-map/fmap-react antd

引入蜂鸟视图 SDK

@indoor-map/fmap-js 依赖全局的 fengmap SDK，需要先按官方顺序在 HTML 中引入：

<script src="libs/fengmap.map.min.js"></script>
<script src="libs/fengmap.analyser.min.js"></script>
<script src="libs/fengmap.plugin.ui.min.js"></script>
<script src="libs/fengmap.plugin.navi.min.js"></script>
<!-- 其他插件按需引入（markers / effect / draw / location / export / layers 等） -->

完整引入顺序见蜂鸟 SDK 参考。SDK 文件不随 npm 包分发，需自行从蜂鸟云控制台或官方示例下载。

第一个地图

import { FMap } from '@indoor-map/fmap-js';

const fmap = new FMap({
  container: '#map',          // 容器 DOM 或选择器
  appName: '蜂鸟研发SDK_2_0', // 换成你自己的应用名
  key: '57c7f309aca507497d028a9c00207cf8', // 换成你自己的 Key
  mapID: '1513361948621471746',            // 换成你自己的地图 ID
});

await fmap.init();
console.log('地图加载完成');

React 方式

import { FMapProvider, FMapView } from '@indoor-map/fmap-react';

export default function App() {
  return (
    <FMapProvider
      options={{
        appName: '蜂鸟研发SDK_2_0',
        key: '57c7f309aca507497d028a9c00207cf8',
        mapID: '1513361948621471746',
      }}
    >
      <FMapView style={{ width: '100%', height: '100vh' }} />
    </FMapProvider>
  );
}

下一步

• 到在线示例修改并运行真实地图代码
• 了解 FMap 的核心 API
• 申请自己的地图凭证