react-amap-v2/docs/components/basic/map.md

高德地图 v2.0 react 组件

---
group:
  title: 基础
  order: 1
order: 1
---

# Map

## 快速入门

此处给出了最简单示例，创建一个地图

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

export default () => <Map />;
```

## 元素种类

设置地图上显示的元素种类, 支持'bg'（地图背景）、'point'（POI 点）、'road'（道路）、'building'（建筑物）

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

export default () => <Map features={['bg']} />;
```

## 获取地图实例

通过事件 `created` 获取地图实例

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

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

  return (
    <Map
      events={{
        created: map => {
          ref.current = map;
        },
        click: () => {
          console.log(ref.current);
        },
      }}
    />
  );
};
```

## 设置 zoom

设置属性

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

import Slider from '@material-ui/core/Slider';

export default () => {
  const [zoom, setZoom] = useState(3);

  return (
    <>
      <Slider
        aria-labelledby="input-slider"
        valueLabelDisplay="auto"
        step={1}
        marks
        min={3}
        max={20}
        value={zoom}
        onChange={(event, newValue) => {
          setZoom(newValue);
        }}
      />
      <Map zoom={zoom} />
    </>
  );
};
```

## 注册事件

> 注册事件，参考高德地图事件

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

export default () => {
  const events = useMemo(
    () => ({
      created: map => {
        // console.log('create event', map);
      },
      click: e => {
        // console.log('click event', e);
      },
    }),
    [],
  );
  return <Map events={events} />;
};
```

## 全局配置

> 使用 `ConfigProvider` 可以配置全局 `Context`

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

export default () => {
  return (
    <ConfigProvider
      value={{
        options: {
          layers: [
            {
              zIndex: 1,
              dataZooms: [3, 20],
              getTileUrl:
                'http://mt{1,2,3,0}.google.cn/vt/lyrs=s&hl=zh-CN&gl=cn&x=[x]&y=[y]&z=[z]&s=Galile',
            },
          ],
        },
      }}
    >
      <Map />
    </ConfigProvider>
  );
};
```