# react-amap
**Repository Path**: uiw/react-amap
## Basic Information
- **Project Name**: react-amap
- **Description**: 基于 React 封装的高德地图组件,帮助你轻松的接入地图到 React 项目中。
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: https://uiw.gitee.io/react-amap
- **GVP Project**: No
## Statistics
- **Stars**: 179
- **Forks**: 45
- **Created**: 2020-09-22
- **Last Updated**: 2025-05-07
## Categories & Tags
**Categories**: react-extensions, gis
**Tags**: None
## README
高德地图 React 组件
这是一个基于 React 封装的高德地图组件,帮助你轻松的接入地图到 React 项目中。除了必须引用的 APILoader/Map 组件外,我们目前提供了最常用的地图组件,能满足大部分简单的业务场景;如果你有更复杂的需求,或者觉得默认提供的组件功能不够,可以使用 Map 组件返回的地图实例,完全自定义一个地图组件,然后根据高德原生 API 做高德允许你做的一切事情。
文档实例预览: [Github Web](https://uiwjs.github.io/react-amap/) | [Gitee Web](https://uiw.gitee.io/react-amap)
### 特性
- ♻️ 自动加载高德地图 SDK(通过创建 Script 标签的形式加载),包括第三方 SDK。
- 📚 使用 Typescript 编写,集成高德地图 SDK [@type](https://github.com/uiwjs/react-amap/tree/master/packages/types) 声明文件(包括中文注释)。
- ⚛️ 支持 React Hook 新增特性(需要 React 16.8+)。
- 💝 不依赖任何第三方组件。
- 📦 拆分成多个包,按需使用包。
### 安装
> 不依赖 [`uiw`](https://github.com/uiwjs/uiw) 组件库
```bash
# 集成了所有依赖包
npm install @uiw/react-amap --save
# 或者按需安装包
npm install @uiw/react-amap-map @uiw/react-amap-api-loader --save
```
`v4` 升级到 `v5`,`APILoader` 主要是对 `APILoader` 做了升级,~~`akay`~~ => `akey`
```diff
```
### 使用
[](https://codesandbox.io/embed/react-amap-example-y0n6c-y0n6c?fontsize=14&hidenavigation=1&theme=dark)
```jsx mdx:preview
import ReactDOM from 'react-dom';
import React, { useEffect, useRef, Fragment } from 'react';
import { Map, APILoader, ScaleControl, ToolBarControl, ControlBarControl, Geolocation } from '@uiw/react-amap';
const Demo = () => (
);
const Mount = () => (
)
export default Mount
```
### 容器组件
Package | Bundle size(gzip) | Version/unpkg
----- | ----- | ----
[`@uiw/react-amap`](https://uiwjs.github.io/react-amap/) 集成所有包 | [](https://bundlephobia.com/package/@uiw/react-amap) [](https://bundlephobia.com/package/@uiw/react-amap) | [](https://www.npmjs.com/package/@uiw/react-amap) [](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-amap/file/README.md)
[`@uiw/react-amap-api-loader`](https://uiwjs.github.io/react-amap/#/api-loader) 加载 SDK (必须) | [](https://bundlephobia.com/package/@uiw/react-amap-api-loader) [](https://bundlephobia.com/package/@uiw/react-amap-api-loader) | [](https://www.npmjs.com/package/@uiw/react-amap-api-loader) [](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-amap-api-loader/file/README.md)
[`@uiw/react-amap-map`](https://uiwjs.github.io/react-amap/#/map) 加载地图(容器) | [](https://bundlephobia.com/package/@uiw/react-amap-map) [](https://bundlephobia.com/package/@uiw/react-amap-map) | [](https://www.npmjs.com/package/@uiw/react-amap-map) [](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-amap-map/file/README.md)
### 控件组件
Package | Bundle size(gzip) | Version/unpkg
----- | ----- | ----
[`@uiw/react-amap-scale-control`](https://uiwjs.github.io/react-amap/#/scale-control) | [](https://bundlephobia.com/package/@uiw/react-amap-scale-control) [](https://bundlephobia.com/package/@uiw/react-amap-scale-control) | [](https://www.npmjs.com/package/@uiw/react-amap-scale-control) [](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-amap-scale-control/file/README.md)
[`@uiw/react-amap-control-bar-control`](https://uiwjs.github.io/react-amap/#/control-bar-control) | [](https://bundlephobia.com/package/@uiw/react-amap-control-bar-control) [](https://bundlephobia.com/package/@uiw/react-amap-control-bar-control) | [](https://www.npmjs.com/package/@uiw/react-amap-control-bar-control) [](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-amap-control-bar-control/file/README.md)
[`@uiw/react-amap-hawk-eye-control`](https://uiwjs.github.io/react-amap/#/hawk-eye-control) | [](https://bundlephobia.com/package/@uiw/react-amap-hawk-eye-control) [](https://bundlephobia.com/package/@uiw/react-amap-hawk-eye-control) | [](https://www.npmjs.com/package/@uiw/react-amap-hawk-eye-control) [](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-amap-hawk-eye-control/file/README.md)
[`@uiw/react-amap-map-type-control`](https://uiwjs.github.io/react-amap/#/map-type-control) | [](https://bundlephobia.com/package/@uiw/react-amap-map-type-control) [](https://bundlephobia.com/package/@uiw/react-amap-map-type-control) | [](https://www.npmjs.com/package/@uiw/react-amap-map-type-control) [](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-amap-map-type-control/file/README.md)
[`@uiw/react-amap-tool-bar-control`](https://uiwjs.github.io/react-amap/#/tool-bar-control) | [](https://bundlephobia.com/package/@uiw/react-amap-tool-bar-control) [](https://bundlephobia.com/package/@uiw/react-amap-tool-bar-control) | [](https://www.npmjs.com/package/@uiw/react-amap-tool-bar-control) [](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-amap-tool-bar-control/file/README.md)
### 覆盖物
Package | Bundle size(gzip) | Version/unpkg
----- | ----- | ----
[`@uiw/react-amap-marker`](https://uiwjs.github.io/react-amap/#/marker) 点标记 | [](https://bundlephobia.com/package/@uiw/react-amap-marker) [](https://bundlephobia.com/package/@uiw/react-amap-marker) | [](https://www.npmjs.com/package/@uiw/react-amap-marker) [](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-amap-marker/file/README.md)
[`@uiw/react-amap-label-marker`](https://uiwjs.github.io/react-amap/#/label-marker) 点标记 | [](https://bundlephobia.com/package/@uiw/react-amap-label-marker) [](https://bundlephobia.com/package/@uiw/react-amap-label-marker) | [](https://www.npmjs.com/package/@uiw/react-amap-label-marker) [](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-amap-label-marker/file/README.md)
[`@uiw/react-amap-text`](https://uiwjs.github.io/react-amap/#/text) 文本标记 | [](https://bundlephobia.com/package/@uiw/react-amap-text) [](https://bundlephobia.com/package/@uiw/react-amap-text) | [](https://www.npmjs.com/package/@uiw/react-amap-text) [](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-amap-text/file/README.md)
[`@uiw/react-amap-tile-layer`](https://uiwjs.github.io/react-amap/#/tile-layer) 文本标记 | [](https://bundlephobia.com/package/@uiw/react-amap-tile-layer) [](https://bundlephobia.com/package/@uiw/react-amap-tile-layer) | [](https://www.npmjs.com/package/@uiw/react-amap-tile-layer) [](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-amap-tile-layer/file/README.md)
[`@uiw/react-amap-polyline`](https://uiwjs.github.io/react-amap/#/polyline) 折线 | [](https://bundlephobia.com/package/@uiw/react-amap-polyline) [](https://bundlephobia.com/package/@uiw/react-amap-polyline) | [](https://www.npmjs.com/package/@uiw/react-amap-polyline) [](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-amap-polyline/file/README.md)
[`@uiw/react-amap-polyline-editor`](https://uiwjs.github.io/react-amap/#/polyline-editor) 折线编辑器 | [](https://bundlephobia.com/package/@uiw/react-amap-polyline-editor) [](https://bundlephobia.com/package/@uiw/react-amap-polyline-editor) | [](https://www.npmjs.com/package/@uiw/react-amap-polyline-editor) [](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-amap-polyline-editor/file/README.md)
[`@uiw/react-amap-poly-editor`](https://uiwjs.github.io/react-amap/#/poly-editor) 折线编辑器 | [](https://bundlephobia.com/package/@uiw/react-amap-poly-editor) [](https://bundlephobia.com/package/@uiw/react-amap-poly-editor) | [](https://www.npmjs.com/package/@uiw/react-amap-poly-editor) [](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-amap-poly-editor/file/README.md)
[`@uiw/react-amap-circle`](https://uiwjs.github.io/react-amap/#/circle) 圆形 | [](https://bundlephobia.com/package/@uiw/react-amap-circle) [](https://bundlephobia.com/package/@uiw/react-amap-circle) | [](https://www.npmjs.com/package/@uiw/react-amap-circle) [](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-amap-circle/file/README.md)
[`@uiw/react-amap-circle-marker`](https://uiwjs.github.io/react-amap/#/circle-marker) 圆点标记 | [](https://bundlephobia.com/package/@uiw/react-amap-circle-marker) [](https://bundlephobia.com/package/@uiw/react-amap-circle-marker) | [](https://www.npmjs.com/package/@uiw/react-amap-circle-marker) [](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-amap-circle-marker/file/README.md)
[`@uiw/react-amap-ellipse`](https://uiwjs.github.io/react-amap/#/ellipse) 圆形组件 | [](https://bundlephobia.com/package/@uiw/react-amap-ellipse) [](https://bundlephobia.com/package/@uiw/react-amap-ellipse) | [](https://www.npmjs.com/package/@uiw/react-amap-ellipse) [](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-amap-ellipse/file/README.md)
[`@uiw/react-amap-rectangle`](https://uiwjs.github.io/react-amap/#/rectangle) 矩形 | [](https://bundlephobia.com/package/@uiw/react-amap-rectangle) [](https://bundlephobia.com/package/@uiw/react-amap-rectangle) | [](https://www.npmjs.com/package/@uiw/react-amap-rectangle) [](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-amap-rectangle/file/README.md)
[`@uiw/react-amap-bezier-curve`](https://uiwjs.github.io/react-amap/#/bezier-curve) 贝塞尔曲线 | [](https://bundlephobia.com/package/@uiw/react-amap-bezier-curve) [](https://bundlephobia.com/package/@uiw/react-amap-bezier-curve) | [](https://www.npmjs.com/package/@uiw/react-amap-bezier-curve) [](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-amap-bezier-curve/file/README.md)
[`@uiw/react-amap-polygon`](https://uiwjs.github.io/react-amap/#/polygon) 多边形 | [](https://bundlephobia.com/package/@uiw/react-amap-polygon) [](https://bundlephobia.com/package/@uiw/react-amap-polygon) | [](https://www.npmjs.com/package/@uiw/react-amap-polygon) [](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-amap-polygon/file/README.md)
[`@uiw/react-amap-polygon-editor`](https://uiwjs.github.io/react-amap/#/polygon-editor) 多边形 | [](https://bundlephobia.com/package/@uiw/react-amap-polygon-editor) [](https://bundlephobia.com/package/@uiw/react-amap-polygon-editor) | [](https://www.npmjs.com/package/@uiw/react-amap-polygon-editor) [](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-amap-polygon-editor/file/README.md)
[`@uiw/react-amap-mass-marks`](https://uiwjs.github.io/react-amap/#/mass-marks) 海量点 | [](https://bundlephobia.com/package/@uiw/react-amap-mass-marks) [](https://bundlephobia.com/package/@uiw/react-amap-mass-marks) | [](https://www.npmjs.com/package/@uiw/react-amap-mass-marks) [](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-amap-mass-marks/file/README.md)
[`@uiw/react-amap-mouse-tool`](https://uiwjs.github.io/react-amap/#/mouse-tool) 绘制工具 | [](https://bundlephobia.com/package/@uiw/react-amap-mouse-tool) [](https://bundlephobia.com/package/@uiw/react-amap-mouse-tool) | [](https://www.npmjs.com/package/@uiw/react-amap-mouse-tool) [](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-amap-mouse-tool/file/README.md)
### 信息窗体 & 右键菜单
Package | Bundle size(gzip) | Version/unpkg
----- | ----- | ----
[`@uiw/react-amap-info-window`](https://uiwjs.github.io/react-amap/#/info-window) 信息窗体 | [](https://bundlephobia.com/package/@uiw/react-amap-info-window) [](https://bundlephobia.com/package/@uiw/react-amap-info-window) | [](https://www.npmjs.com/package/@uiw/react-amap-info-window) [](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-amap-info-window/file/README.md)
[`@uiw/react-amap-context-menu`](https://uiwjs.github.io/react-amap/#/context-menu) 右键菜单 | [](https://bundlephobia.com/package/@uiw/react-amap-context-menu) [](https://bundlephobia.com/package/@uiw/react-amap-context-menu) | [](https://www.npmjs.com/package/@uiw/react-amap-context-menu) [](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-amap-context-menu/file/README.md)
### 服务
Package | Bundle size(gzip) | Version/unpkg
----- | ----- | ----
[`@uiw/react-amap-geolocation`](https://uiwjs.github.io/react-amap/#/geolocation) 定位 | [](https://bundlephobia.com/package/@uiw/react-amap-geolocation) [](https://bundlephobia.com/package/@uiw/react-amap-geolocation) | [](https://www.npmjs.com/package/@uiw/react-amap-geolocation) [](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-amap-geolocation/file/README.md)
[`@uiw/react-amap-weather`](https://uiwjs.github.io/react-amap/#/weather) 天气查询服务 | [](https://bundlephobia.com/package/@uiw/react-amap-weather) [](https://bundlephobia.com/package/@uiw/react-amap-weather) | [](https://www.npmjs.com/package/@uiw/react-amap-weather) [](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-amap-weather/file/README.md)
[`@uiw/react-amap-auto-complete`](https://uiwjs.github.io/react-amap/#/auto-complete) 输入提示 | [](https://bundlephobia.com/package/@uiw/react-amap-auto-complete) [](https://bundlephobia.com/package/@uiw/react-amap-auto-complete) | [](https://www.npmjs.com/package/@uiw/react-amap-auto-complete) [](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-amap-auto-complete/file/README.md)
### 其它
Package | Bundle size(gzip) | Version/unpkg
----- | ----- | ----
[`@uiw/react-amap-require-script`](https://uiwjs.github.io/react-amap/#/require-script) | [](https://bundlephobia.com/package/@uiw/react-amap-require-script) [](https://bundlephobia.com/package/@uiw/react-amap-require-script) | [](https://www.npmjs.com/package/@uiw/react-amap-require-script) [](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-amap-require-script/file/README.md)
[`@uiw/react-amap-types`](https://uiwjs.github.io/react-amap/#/types) 类型定义 | [](https://www.npmjs.com/package/@uiw/react-amap-types) | [](https://www.npmjs.com/package/@uiw/react-amap-types) [](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-amap-types/file/README.md)
[`@uiw/react-amap-utils`](https://uiwjs.github.io/react-amap/#/utils) | [](https://bundlephobia.com/package/@uiw/react-amap-utils) [](https://bundlephobia.com/package/@uiw/react-amap-utils) | [](https://www.npmjs.com/package/@uiw/react-amap-utils) [](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-amap-utils/file/README.md)
### 开发
```bash
npm install # Step 1: 安装依赖
npm run build # Step 2: 编译所有包
npm run start # 文档网站运行
npm run watch:amap # 监听编译输出 js 文件, 监听编译输出 .d.ts 类型文件
```
### 相关连接
- [@uiw/react-baidu-map](https://github.com/uiwjs/react-baidu-map) 百度地图 React 组件
- [高德拾取坐标系统](https://lbs.amap.com/console/show/picker)
- [官方示例中心](https://lbs.amap.com/demo-center/jsapi-v2)
- [高德地图 JSAPI 2.0](https://a.amap.com/jsapi/static/doc/index.html)
### Contributors
As always, thanks to our amazing contributors!
Made with [contributors](https://github.com/jaywcjlove/github-action-contributors).
### License
Licensed under the MIT License.