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

高德地图 v2.0 react 组件

---
group:
  title: 覆盖物
  order: 2
order: 1
---

# Marker

## 快速入门

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

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

export default () => (
  <Map center={[121.468524, 31.22466]}>
    <Marker position={[121.436938, 31.180024]} />
  </Map>
);
```

## 获取实例

通过事件 `created` 获取标记实例

```tsx
import React, { useRef, useEffect } from 'react';
import { Map, Marker } from 'react-amap-v2';

export default () => {
  const ref = useRef();

  return (
    <Map center={[121.468524, 31.22466]}>
      <Marker
        events={{
          created: marker => {
            ref.current = marker;
          },
        }}
        position={[121.436938, 31.180024]}
      />
    </Map>
  );
};
```

## 自定义内容

自定义标记内容

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

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

const directions = ['top', 'right', 'bottom', 'left', 'center'];

const MarkerIcon = () => (
  <img width={36} height={36} src="/assets/marker-1.svg" alt="marker" />
);

export default () => {
  const [direction, setDirection] = useState('bottom');
  return (
    <>
      <Paper style={{ marginBottom: 20, padding: 20 }} color="text.primary">
        <FormControlLabel
          control={
            <Select
              value={direction}
              onChange={e => setDirection(e.target.value)}
            >
              {directions.map(key => (
                <MenuItem key={key} value={key}>
                  {key}
                </MenuItem>
              ))}
            </Select>
          }
          label="选择锚点"
        />
      </Paper>
      <Map center={[121.468524, 31.22466]}>
        <Marker
          anchor="bottom-center"
          position={[121.468524, 31.22466]}
          label={{
            content: '使用自定义Icon的Marker',
            direction,
          }}
        >
          <MarkerIcon />
        </Marker>
      </Map>
    </>
  );
};
```

## 动画

移动状态

```tsx
import React, { useState } from 'react';
import { ConfigProvider, Map, Marker } 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';

const CarIcon = () => (
  <img width={36} height={36} src="/assets/car.png" alt="marker" />
);

export default () => {
  const [car, setCar] = useState();

  return (
    <Map zoom={6} center={[121.468524, 31.22466]}>
      <Marker
        anchor="center"
        autoRotation
        position={[121.436938, 31.180024]}
        events={{ created: marker => setCar(marker) }}
      >
        <CarIcon />
      </Marker>
      <Paper
        color="text.primary"
        style={{
          zIndex: 10,
          position: 'absolute',
          top: 20,
          right: 20,
          padding: '0 10px',
        }}
      >
        <Button
          color="primary"
          onClick={() => {
            AMap.plugin('AMap.MoveAnimation', function() {
              car &&
                car.moveTo(
                  [
                    Mock.Random.float(121.140308, 121.82558, 7, 8),
                    Mock.Random.float(30.853426, 31.363719, 7, 7),
                  ],
                  {
                    duration: 1000,
                    autoRotation: true,
                  },
                );
            });
          }}
        >
          随机位置
        </Button>
      </Paper>
    </Map>
  );
};
```

## 设置属性

设置属性

```tsx
import React, { useState } from 'react';
import { Map, Marker } 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';

const CarIcon = () => (
  <img width={36} height={36} src="/assets/car.png" alt="marker" />
);

export default () => {
  const [visible, setVisible] = useState(true);
  const [posA, setPosA] = useState([121.436938, 31.180024]);
  const [posB, setPosB] = useState([121.436938, 31.180024]);
  return (
    <Map zoom={6} center={[121.468524, 31.22466]}>
      <Marker visible={visible} anchor="center" autoRotation position={posA}>
        <CarIcon />
      </Marker>
      <Marker visible={visible} autoRotation position={posB}></Marker>
      <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="是否显示"
        />
        <Button
          color="primary"
          onClick={() => {
            setPosA([
              Mock.Random.float(121.140308, 121.82558, 7, 8),
              Mock.Random.float(30.853426, 31.363719, 7, 7),
            ]);
          }}
        >
          随机A位置
        </Button>
        <Button
          color="primary"
          onClick={() => {
            setPosB([
              Mock.Random.float(121.140308, 121.82558, 7, 8),
              Mock.Random.float(30.853426, 31.363719, 7, 7),
            ]);
          }}
        >
          随机B位置
        </Button>
      </Paper>
    </Map>
  );
};
```