react-amap-v2/docs/components/overlay/rectangle.md

高德地图 v2.0 react 组件

---
order: 7
---

# Rectangle

## 快速入门

此处给出了最简单示例

```tsx
import React, { useState } from 'react';
import { Map, Rectangle } from 'react-amap-v2';

import Paper from '@material-ui/core/Paper';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Switch from '@material-ui/core/Switch';

export default () => {
  const [editable, setEditable] = useState(false);

  return (
    <React.StrictMode>
      <Map zoom={12} center={[116.387175, 39.876405]}>
        <Paper
          color="text.primary"
          style={{
            zIndex: 10,
            position: 'absolute',
            top: 20,
            right: 20,
            padding: '0 10px',
          }}
        >
          <FormControlLabel
            control={
              <Switch
                checked={editable}
                onChange={e => setEditable(e.target.checked)}
              />
            }
            label="可编辑"
          />
        </Paper>
        <Rectangle
          editable={editable}
          bounds={{
            southWest: [116.356449, 39.859008],
            northEast: [116.417901, 39.893797],
          }}
        />
      </Map>
    </React.StrictMode>
  );
};
```