react-amap-v2/docs/components/mass/mass-marks.md

高德地图 v2.0 react 组件

---
order: 21
---

# MassMarks

## 快速入门

此处给出了最简单示例

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

// 模拟数据
const points = [];
for (let i = 0; i < 1000; i++) {
  let _r = Math.random() * Math.PI * 2;
  points.push([
    116.4 + Math.cos(_r) * Math.random() * 0.5,
    40 + Math.sin(_r) * Math.random() * 0.5,
  ]);
}

var style = [
  {
    url: 'https://webapi.amap.com/images/mass/mass0.png',
    anchor: [3, 3],
    size: [11, 11],
    zIndex: 3,
  },
  {
    url: 'https://webapi.amap.com/images/mass/mass1.png',
    anchor: [4, 4],
    size: [7, 7],
    zIndex: 2,
  },
  {
    url: 'https://webapi.amap.com/images/mass/mass2.png',
    anchor: [3, 3],
    size: [11, 11],
    zIndex: 1,
  },
];

function random(lower, upper) {
  return Math.floor(Math.random() * (upper - lower + 1)) + lower;
}

export default () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    setData(
      points.map((lnglat, index) => ({
        lnglat,
        index,
        style: random(1, 3),
      })),
    );
  }, []);

  return useMemo(
    () => (
      <Map
        zoom={9}
        showIndoorMap={false}
        showLabel={false}
        mapStyle="amap://styles/whitesmoke"
        center={[116.12, 40.11]}
      >
        <MassMarks
          data={data}
          zIndex={111}
          style={style}
          events={{
            click: e => {
              console.log(e);
            },
          }}
        />
      </Map>
    ),
    [data],
  );
};
```