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

高德地图 v2.0 react 组件

---
group:
  title: 覆盖物分组
  order: 3
order: 1
---

# OverlayGroup

## 快速入门

此处给出了最简单示例

```tsx
import React, { useState, useMemo } from 'react';
import { Map, OverlayGroup, Marker, Polygon, Polyline } 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 [visible, setVisible] = useState(true);
  return (
    <>
      <Map center={[121.468524, 31.22466]}>
        <Paper
          color="text.primary"
          style={{
            zIndex: 10,
            position: 'absolute',
            top: 20,
            right: 20,
            padding: '0 10px',
          }}
        >
          <FormControlLabel
            control={
              <Switch
                checked={visible}
                onChange={e => setVisible(e.target.checked)}
              />
            }
            label="是否显示"
          />
        </Paper>
        <OverlayGroup
          visible={visible}
          events={{
            click: e => {
              console.log(e);
            },
          }}
          fillColor="#52c41a"
          strokeWeight={6}
        >
          <Marker position={[121.480884, 30.947106]} />
          <Polyline
            showDir
            path={[
              [121.560535, 31.25284],
              [121.726703, 31.183549],
              [121.726703, 31.183549],
            ]}
          />
          <Polygon
            path={[
              [121.247424, 31.257536],
              [121.523456, 31.259884],
              [121.454791, 31.162399],
            ]}
          />
        </OverlayGroup>
      </Map>
    </>
  );
};
```