基于 React 封装的高德地图组件，助你轻松的接入高德地图到 React 项目中。
本仓库提供了常用的地图组件，如不满足您的需求：
- 请在issues 提出需求。
- 提PR扩展本库的组件。
- 使用本库提供的自定义组件的能力，自己封装。
本库主要参考 饿了么react-amap，API基本一致。
与饿了么[react-amap]区别如下:
Map组件属性amapkey修改为mapKey- 采用
context共享map实例，其他组件没有必要一定是Map组件的子组件 - Map组件不支持加载插件，由项目封装的子组件代替。
- 提供完善的高德API的类型定义，丝滑般的开发体验
- 📦 开箱即用，本组件支持了大部分的常用地图组件
- 🎉 可扩展，支持自定义地图组件
- 💻 使用 TypeScript 编写，提供完善的类型定义，包含高德地图 JS SDK 声明。
- 💝 无任何第三方依赖
# npm install
$ npm install @pansy/react-amap --save
# yarn install
$ yarn add @pansy/react-amap<div id="app"></div>#app {
width: 600px;
height: 400px;
}import React from 'react';
import ReactDOM from 'react-dom';
import { Map } from 'react-amap';
ReactDOM.render(
<Map mapKey={YOUR_AMAP_KEY} version={VERSION} />,
document.querySelector('#app')
)| 名称 | 说明 |
|---|---|
| Map | 地图组件 |
| BezierCurve | 贝塞尔曲线 |
| BezierCurveEditor | 编辑贝塞尔曲线，必须作为BezierCurve的子组件使用 |
| Circle | 圆形 |
| CircleEditor | 编辑圆形，必须作为Circle的子组件使用 |
| CircleMarker | 圆点标记 |
| ContextMenu | 地图右键菜单 |
| ControlBar | 组合了旋转、倾斜、复位、缩放在内的地图控件, 3D地图使用 |
| Ellipse | 椭圆 |
| EllipseEditor | 编辑椭圆，必须作为Ellipse的子组件使用 |
| Heatmap | 热力图组件 |
| InfoWindow | 信息窗体 |
| MapType | 地图类型切换插件，用来切换固定的几个常用图层 |
| Marker | 单个坐标点 |
| Markers | 海量坐标点 |
| MouseTool | 鼠标工具 |
| OverView | 地图鹰眼 |
| Polygon | 在地图上显示多边形 |
| Polyline | 在地图上显示折线 |
| PolyEditor | 多边形和折线的编辑组件，必须作为其子组件使用 |
| Rectangle | 在地图上显示矩形 |
| RectangleEditor | 编辑矩形，必须作为Rectangle的子组件使用 |
| Scale | 比例尺 |
| ToolBar | 工具条 |
| Github Issue | 钉钉群 | 微信群 |
|---|---|---|
| issues |  |
 |