react-amap-v2/docs/tutorial/start.md

高德地图 v2.0 react 组件

# 快速开始

## 安装组件

```shell
npm install react-amap-v2

# or

yarn add react-amap-v2
```

## 引入组件

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

## 获取地图实例

确保组件为地图组件的子组件，可以用这个来扩展自定义组件

```js
import React from 'react';
import { Map, useMap } from 'react-amap-v2';

const CustomComponent = () => {
  const { map } = useMap();
  return <div>自定义</div>;
};

const MainComponent = () => {
  return (
    <Map>
      <CustomComponent />
    </Map>
  );
};
```

## 全局配置

地图需要设置属于自己的产品密钥等信息，因为有可能一个系统这些都是相同的，所以引入了一个配置的概念，即 `ConfigProvider`，只需在最外层设置，对所有的 `Map` 组件生效

> 请务必修改默认的密钥，否则将导致产品不稳定

| 属性    | 描述            | 默认值                           |
| :------ | :-------------- | :------------------------------- |
| url     | SDK 地址        | //webapi.amap.com/maps           |
| UIUrl   | UI SDK 地址     | //webapi.amap.com/ui/1.1/main.js |
| version | 使用的 SDK 版本 | 2.0                              |
| key     | 使用的密钥      | -                                |

示例：

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

const MainComponent = () => {
  return (
    <ConfigProvider>
      <Map />
    </ConfigProvider>
  );
};
```