React AMap

基于 React 封装的高德地图组件，助你轻松的接入高德地图到 React 项目中。

本仓库提供了常用的地图组件，如不满足您的需求：

1. 请在 issues 提出需求。
2. 提 PR 扩展组件。
3. 使用提供的自定义组件的能力，自己封装。

注意

由于高德APIv1 和 v2兼容性问题，本仓库提供对应的版本

• v1.x.x 对应 amap v1
• v2.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	地理编码与逆地理编码服务

AMapUI

名称	说明
PathNavigator	轨迹巡航控制
PointSimplifier	海量点展示

Loca

名称	说明
ScatterLayer	动画图层
PulseLinkLayer	连接飞线图层

👥 社区互助

Github Issue	钉钉群	微信群
issues