基于 React 封装的高德地图组件，助你轻松的接入高德地图到 React 项目中。
本仓库提供了常用的地图组件，如不满足您的需求：
- 请在 issues 提出需求。
- 提 PR 扩展组件。
- 使用提供的自定义组件的能力，自己封装。
注意
由于高德APIv1 和 v2兼容性问题，本仓库提供对应的版本
v1.x.x对应amap v1v2.x.x对应amap v2
- 📦 开箱即用，封装了大部分常用的地图组件
- 🎉 可扩展，支持自定义地图组件
- 💻 使用 TypeScript 编写，提供完善的类型定义，包含高德地图 JS SDK 类型声明
# npm install
$ npm install @pansy/react-amap --save
# yarn install
$ yarn add @pansy/react-amap
# pnpm install
$ pnpm i @pansy/react-amap<div id="app"></div>#app {
width: 600px;
height: 400px;
}import React from 'react';
import ReactDOM from 'react-dom';
import { Map } from '@pansy/react-amap';
ReactDOM.render(
<Map mapKey={YOUR_AMAP_KEY} />,
document.querySelector('#app')
)| 名称 | 说明 |
|---|---|
| APILoader | JS API加载 |
| Map | 地图组件 |
| 名称 | 说明 |
|---|---|
| Heatmap | 热力图 |
| Satellite | 卫星图 |
| Traffic | 实时交通图层 |
| 名称 | 说明 |
|---|---|
| ElasticMarker | 灵活点标记 |
| Marker | 点标记 |
| MarkerCluster | 点聚合 |
| MassMarks | 海量点类 |
| 名称 | 说明 |
|---|---|
| InfoWindow | 信息窗体 |
| 名称 | 说明 |
|---|---|
| ContextMenu | 右键菜单 |
| 名称 | 说明 |
|---|---|
| BezierCurve | 贝塞尔曲线 |
| Circle | 圆形 |
| CircleMarker | 圆点标记 |
| Ellipse | 椭圆 |
| Polygon | 多边形 |
| Polyline | 折线 |
| Rectangle | 矩形 |
| 名称 | 说明 |
|---|---|
| MouseTool | 鼠标工具 |
| RangingTool | 距离量测 |
| BezierCurveEditor | 贝瑟尔曲线编辑 |
| CircleEditor | 圆形编辑 |
| EllipseEditor | 椭圆编辑 |
| PolyEditor | 折线/多边形编辑 |
| PolygonEditor | 多边形编辑 |
| PolylineEditor | 折线编辑 |
| RectangleEditor | 矩形编辑 |
| 名称 | 说明 |
|---|---|
| ControlBar | 3D控制组件 |
| HawkEye | 地图鹰眼 |
| MapType | 地图类型切换 |
| Scale | 比例尺 |
| ToolBar | 工具条 |
| 名称 | 说明 |
|---|---|
| AutoComplete | 关键字搜索 |
| DistrictSearch | 行政区查询 |
| 名称 | 说明 |
|---|---|
| Geocoder | 地理编码与逆地理编码服务 |
| 名称 | 说明 |
|---|---|
| PathNavigator | 轨迹巡航控制 |
| PointSimplifier | 海量点展示 |
| 名称 | 说明 |
|---|---|
| ScatterLayer | 动画图层 |
| PulseLinkLayer | 连接飞线图层 |
| Github Issue | 钉钉群 | 微信群 |
|---|---|---|
| issues |  |
 |
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent