---
name: jjb-amap
description: 定义 JJB 地图组件使用规范。在使用 AMap、高德地图或 jjb-react-admin-component/AMap 时使用。必须参考 MD/d.ts 文档。
---

# 通用业务组件使用规范

## 地图组件

> **⚠️ 重要约束**：本章节所有组件必须严格参考 node_modules 中对应依赖包的 MD 文档或 d.ts 文件！不得猜测组件属性！

## 使用

```javascript
import AMap from '@cqsjjb/jjb-react-admin-component/AMap'
```

## 代码演示

```jsx
import { useState } from 'react';
import { Button } from 'antd';
import AMap from '@cqsjjb/jjb-react-admin-component/AMap';

function App() {
  const [ open, setOpen ] = useState(false);
  return (
    <>
      <Button onClick={() => setOpen(true)}>打开地图</Button>
      {open && (
        <AMap
          onOk={data => {
            console.log(data);
            setOpen(false);
          }}
          onCacnel={() => {
            setOpen(false);
          }}
        />
      )}
    </>
  )
}
```

## API

| 属性     | 说明   | 类型                                                                                    | 默认值   |
|--------|:-----|:--------------------------------------------------------------------------------------|:------|
| lng    | 经度   | `number`                                                                              | 116.404 |
| lat    | 纬度   | `number`                                                                              | 39.915 |
| title  | 弹窗标题 | `string`                                                                              | 高德地图  |
| width  | 弹窗宽度 | `number`                                                                              | 700   |
| onOk   | 确认回调 | `(data: { lng: number, lat: number, comp: IComp, compText: Text }) => void`         | -     |
| onCancel | 取消回调 | `() => void`                                                                          | -     |

## 确认回调-IComp

| 属性          | 说明  | 类型     | 默认值 |
|-------------|:----|:-------|:----|
| province    | 省份  | `string` | -   |
| city        | 城市  | `string` | -   |
| district    | 区县  | `string` | -   |
| street      | 街道  | `string` | -   |
| streetNumber | 门牌号 | `string` | -   |

## 常见问题

1. **加载地图失败，缺少必要的文件！**
   
   请确认应用 `jjb.config.js` 文件 `windowInject.sctipts` 中是否导入高德地图SDK。

2. **onOk确认回调compText为undefined**
   
   请确认高德地图是否授权Web应用。