react-amap-v2/docs/components/overlay/info-Window.md

高德地图 v2.0 react 组件

---
order: 3
---

# InfoWindow

## 快速入门

此处给出了最简单示例，创建标记

```tsx
import React, { useState } from 'react';
import { Map, Marker, InfoWindow } from 'react-amap-v2';
import Mock from 'mockjs';

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

const anchors = [
  'top-left',
  'top-center',
  'top-right',
  'middle-left',
  'center',
  'middle-right',
  'bottom-left',
  'bottom-center',
  'bottom-right',
];

export default () => {
  const [visible, setVisible] = useState(true);
  const [pos, setPos] = useState([121.436938, 31.180024]);
  const [anchor, setAnchor] = useState('bottom-center');

  return (
    <>
      <Paper style={{ marginBottom: 20, padding: 20 }} color="text.primary">
        <FormControlLabel
          control={
            <Switch
              checked={visible}
              onChange={e => setVisible(e.target.checked)}
            />
          }
          label="是否显示"
        />
        <FormControlLabel
          control={
            <Select value={anchor} onChange={e => setAnchor(e.target.value)}>
              {anchors.map(key => (
                <MenuItem key={key} value={key}>
                  {key}
                </MenuItem>
              ))}
            </Select>
          }
          label="选择锚点"
        />
        <Button
          color="primary"
          onClick={() => {
            setPos([
              Mock.Random.float(121.140308, 121.82558, 7, 8),
              Mock.Random.float(30.853426, 31.363719, 7, 7),
            ]);
          }}
        >
          随机位置
        </Button>
      </Paper>
      <Map center={pos}>
        <Marker
          position={pos}
          events={{
            click: () => {
              setVisible(true);
            },
          }}
        />
        <InfoWindow
          anchor={anchor}
          position={pos}
          visible={visible}
          offset={[0, -36]}
          events={{
            close: () => {
              setVisible(false);
            },
            open: () => {
              setVisible(true);
            },
          }}
        >
          <div
            onClick={() => {
              console.log('1');
            }}
          >
            <span>信息窗体 {pos}</span>
          </div>
        </InfoWindow>
      </Map>
    </>
  );
};
```