^{使用 我的应用 也是一种 支持 我的方式：}

高德地图 React 组件

这是一个基于 React 封装的高德地图组件，帮助你轻松的接入地图到 React 项目中。除了必须引用的 APILoader/Map 组件外，我们目前提供了最常用的地图组件，能满足大部分简单的业务场景；如果你有更复杂的需求，或者觉得默认提供的组件功能不够，可以使用 Map 组件返回的地图实例，完全自定义一个地图组件，然后根据高德原生 API 做高德允许你做的一切事情。

文档实例预览: Github Web | Gitee Web

> [!WARNING]
>
> 官网示例无法预览，因为 akey 被官方告知要付费，本项目目前没有任何捐赠，付不起钱删除了 akey

$3

- ♻️ 自动加载高德地图 SDK（通过创建 Script 标签的形式加载），包括第三方 SDK。
- 📚 使用 Typescript 编写，集成高德地图 SDK @type 声明文件（包括中文注释）。
- ⚛️ 支持 React Hook 新增特性（需要 React 16.8+）。
- 💝 不依赖任何第三方组件。
- 📦 拆分成多个包，按需使用包。

$3

> 不依赖 uiw 组件库

``bash


集成了所有依赖包

v4 升级到 v5，APILoader 主要是对 APILoader 做了升级，~~akay~~ => akey

`diff
- akay
- protocol
- hostAndPath
- callbackName
- plugin
- disableScripts
+ akey
+ plugins
+ AMapUI
+ Loca
>
`

v5 升级到 v6，v6 升级到 v7 只是对 react 19 的支持，没有针对 API 做任何修改

7.1.0 标记覆盖物 props ~~visiable~~ 过时，使用 visible 未来的版本中将会移除 ~~visiable~~

$3

![Open in CodeSandbox](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
`

$3

Package | Bundle size(gzip) | Version/unpkg
----- | ----- | ----
@uiw/react-amap 集成所有包 | ![bundle size](https://bundlephobia.com/package/@uiw/react-amap) ![bundle size(gzip)](https://bundlephobia.com/package/@uiw/react-amap) | ![npm version](https://www.npmjs.com/package/@uiw/react-amap) ![Open in unpkg](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-amap/file/README.md)
@uiw/react-amap-api-loader 加载 SDK (必须) | ![bundle size](https://bundlephobia.com/package/@uiw/react-amap-api-loader) ![bundle size(gzip)](https://bundlephobia.com/package/@uiw/react-amap-api-loader) | ![npm version](https://www.npmjs.com/package/@uiw/react-amap-api-loader) ![Open in unpkg](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-amap-api-loader/file/README.md)
@uiw/react-amap-map 加载地图(容器) | ![bundle size](https://bundlephobia.com/package/@uiw/react-amap-map) ![bundle size(gzip)](https://bundlephobia.com/package/@uiw/react-amap-map) | ![npm version](https://www.npmjs.com/package/@uiw/react-amap-map) ![Open in unpkg](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-amap-map/file/README.md)

$3

Package | Bundle size(gzip) | Version/unpkg
----- | ----- | ----
@uiw/react-amap-scale-control | ![bundle size](https://bundlephobia.com/package/@uiw/react-amap-scale-control) ![bundle size(gzip)](https://bundlephobia.com/package/@uiw/react-amap-scale-control) | ![npm version](https://www.npmjs.com/package/@uiw/react-amap-scale-control) ![Open in unpkg](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-amap-scale-control/file/README.md)
@uiw/react-amap-control-bar-control | ![bundle size](https://bundlephobia.com/package/@uiw/react-amap-control-bar-control) ![bundle size(gzip)](https://bundlephobia.com/package/@uiw/react-amap-control-bar-control) | ![npm version](https://www.npmjs.com/package/@uiw/react-amap-control-bar-control) ![Open in unpkg](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-amap-control-bar-control/file/README.md)
@uiw/react-amap-hawk-eye-control | ![bundle size](https://bundlephobia.com/package/@uiw/react-amap-hawk-eye-control) ![bundle size(gzip)](https://bundlephobia.com/package/@uiw/react-amap-hawk-eye-control) | ![npm version](https://www.npmjs.com/package/@uiw/react-amap-hawk-eye-control) ![Open in unpkg](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-amap-hawk-eye-control/file/README.md)
@uiw/react-amap-map-type-control | ![bundle size](https://bundlephobia.com/package/@uiw/react-amap-map-type-control) ![bundle size(gzip)](https://bundlephobia.com/package/@uiw/react-amap-map-type-control) | ![npm version](https://www.npmjs.com/package/@uiw/react-amap-map-type-control) ![Open in unpkg](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-amap-map-type-control/file/README.md)
@uiw/react-amap-tool-bar-control | ![bundle size](https://bundlephobia.com/package/@uiw/react-amap-tool-bar-control) ![bundle size(gzip)](https://bundlephobia.com/package/@uiw/react-amap-tool-bar-control) | ![npm version](https://www.npmjs.com/package/@uiw/react-amap-tool-bar-control) ![Open in unpkg](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-amap-tool-bar-control/file/README.md)

$3

Package | Bundle size(gzip) | Version/unpkg
----- | ----- | ----
@uiw/react-amap-marker 点标记 | ![bundle size](https://bundlephobia.com/package/@uiw/react-amap-marker) ![bundle size(gzip)](https://bundlephobia.com/package/@uiw/react-amap-marker) | ![npm version](https://www.npmjs.com/package/@uiw/react-amap-marker) ![Open in unpkg](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-amap-marker/file/README.md)
@uiw/react-amap-label-marker 点标记 | ![bundle size](https://bundlephobia.com/package/@uiw/react-amap-label-marker) ![bundle size(gzip)](https://bundlephobia.com/package/@uiw/react-amap-label-marker) | ![npm version](https://www.npmjs.com/package/@uiw/react-amap-label-marker) ![Open in unpkg](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-amap-label-marker/file/README.md)
@uiw/react-amap-text 文本标记 | ![bundle size](https://bundlephobia.com/package/@uiw/react-amap-text) ![bundle size(gzip)](https://bundlephobia.com/package/@uiw/react-amap-text) | ![npm version](https://www.npmjs.com/package/@uiw/react-amap-text) ![Open in unpkg](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-amap-text/file/README.md)
@uiw/react-amap-tile-layer 文本标记 | ![bundle size](https://bundlephobia.com/package/@uiw/react-amap-tile-layer) ![bundle size(gzip)](https://bundlephobia.com/package/@uiw/react-amap-tile-layer) | ![npm version](https://www.npmjs.com/package/@uiw/react-amap-tile-layer) ![Open in unpkg](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-amap-tile-layer/file/README.md)
@uiw/react-amap-polyline 折线 | ![bundle size](https://bundlephobia.com/package/@uiw/react-amap-polyline) ![bundle size(gzip)](https://bundlephobia.com/package/@uiw/react-amap-polyline) | ![npm version](https://www.npmjs.com/package/@uiw/react-amap-polyline) ![Open in unpkg](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-amap-polyline/file/README.md)
@uiw/react-amap-polyline-editor 折线编辑器 | ![bundle size](https://bundlephobia.com/package/@uiw/react-amap-polyline-editor) ![bundle size(gzip)](https://bundlephobia.com/package/@uiw/react-amap-polyline-editor) | ![npm version](https://www.npmjs.com/package/@uiw/react-amap-polyline-editor) ![Open in unpkg](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-amap-polyline-editor/file/README.md)
@uiw/react-amap-poly-editor 折线编辑器 | ![bundle size](https://bundlephobia.com/package/@uiw/react-amap-poly-editor) ![bundle size(gzip)](https://bundlephobia.com/package/@uiw/react-amap-poly-editor) | ![npm version](https://www.npmjs.com/package/@uiw/react-amap-poly-editor) ![Open in unpkg](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-amap-poly-editor/file/README.md)
@uiw/react-amap-circle 圆形 | ![bundle size](https://bundlephobia.com/package/@uiw/react-amap-circle) ![bundle size(gzip)](https://bundlephobia.com/package/@uiw/react-amap-circle) | ![npm version](https://www.npmjs.com/package/@uiw/react-amap-circle) ![Open in unpkg](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-amap-circle/file/README.md)
@uiw/react-amap-circle-marker 圆点标记 | ![bundle size](https://bundlephobia.com/package/@uiw/react-amap-circle-marker) ![bundle size(gzip)](https://bundlephobia.com/package/@uiw/react-amap-circle-marker) | ![npm version](https://www.npmjs.com/package/@uiw/react-amap-circle-marker) ![Open in unpkg](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-amap-circle-marker/file/README.md)
@uiw/react-amap-ellipse 圆形组件 | ![bundle size](https://bundlephobia.com/package/@uiw/react-amap-ellipse) ![bundle size(gzip)](https://bundlephobia.com/package/@uiw/react-amap-ellipse) | ![npm version](https://www.npmjs.com/package/@uiw/react-amap-ellipse) ![Open in unpkg](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-amap-ellipse/file/README.md)
@uiw/react-amap-rectangle 矩形 | ![bundle size](https://bundlephobia.com/package/@uiw/react-amap-rectangle) ![bundle size(gzip)](https://bundlephobia.com/package/@uiw/react-amap-rectangle) | ![npm version](https://www.npmjs.com/package/@uiw/react-amap-rectangle) ![Open in unpkg](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-amap-rectangle/file/README.md)
@uiw/react-amap-bezier-curve 贝塞尔曲线 | ![bundle size](https://bundlephobia.com/package/@uiw/react-amap-bezier-curve) ![bundle size(gzip)](https://bundlephobia.com/package/@uiw/react-amap-bezier-curve) | ![npm version](https://www.npmjs.com/package/@uiw/react-amap-bezier-curve) ![Open in unpkg](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-amap-bezier-curve/file/README.md)
@uiw/react-amap-polygon 多边形 | ![bundle size](https://bundlephobia.com/package/@uiw/react-amap-polygon) ![bundle size(gzip)](https://bundlephobia.com/package/@uiw/react-amap-polygon) | ![npm version](https://www.npmjs.com/package/@uiw/react-amap-polygon) ![Open in unpkg](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-amap-polygon/file/README.md)
@uiw/react-amap-polygon-editor 多边形 | ![bundle size](https://bundlephobia.com/package/@uiw/react-amap-polygon-editor) ![bundle size(gzip)](https://bundlephobia.com/package/@uiw/react-amap-polygon-editor) | ![npm version](https://www.npmjs.com/package/@uiw/react-amap-polygon-editor) ![Open in unpkg](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-amap-polygon-editor/file/README.md)
@uiw/react-amap-mass-marks 海量点 | ![bundle size](https://bundlephobia.com/package/@uiw/react-amap-mass-marks) ![bundle size(gzip)](https://bundlephobia.com/package/@uiw/react-amap-mass-marks) | ![npm version](https://www.npmjs.com/package/@uiw/react-amap-mass-marks) ![Open in unpkg](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-amap-mass-marks/file/README.md)
@uiw/react-amap-mouse-tool 绘制工具 | ![bundle size](https://bundlephobia.com/package/@uiw/react-amap-mouse-tool) ![bundle size(gzip)](https://bundlephobia.com/package/@uiw/react-amap-mouse-tool) | ![npm version](https://www.npmjs.com/package/@uiw/react-amap-mouse-tool) ![Open in unpkg](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-amap-mouse-tool/file/README.md)

$3

Package | Bundle size(gzip) | Version/unpkg
----- | ----- | ----
@uiw/react-amap-info-window 信息窗体 | ![bundle size](https://bundlephobia.com/package/@uiw/react-amap-info-window) ![bundle size(gzip)](https://bundlephobia.com/package/@uiw/react-amap-info-window) | ![npm version](https://www.npmjs.com/package/@uiw/react-amap-info-window) ![Open in unpkg](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-amap-info-window/file/README.md)
@uiw/react-amap-context-menu 右键菜单 | ![bundle size](https://bundlephobia.com/package/@uiw/react-amap-context-menu) ![bundle size(gzip)](https://bundlephobia.com/package/@uiw/react-amap-context-menu) | ![npm version](https://www.npmjs.com/package/@uiw/react-amap-context-menu) ![Open in unpkg](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-amap-context-menu/file/README.md)

$3

Package | Bundle size(gzip) | Version/unpkg
----- | ----- | ----
@uiw/react-amap-geolocation 定位 | ![bundle size](https://bundlephobia.com/package/@uiw/react-amap-geolocation) ![bundle size(gzip)](https://bundlephobia.com/package/@uiw/react-amap-geolocation) | ![npm version](https://www.npmjs.com/package/@uiw/react-amap-geolocation) ![Open in unpkg](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-amap-geolocation/file/README.md)
@uiw/react-amap-weather 天气查询服务 | ![bundle size](https://bundlephobia.com/package/@uiw/react-amap-weather) ![bundle size(gzip)](https://bundlephobia.com/package/@uiw/react-amap-weather) | ![npm version](https://www.npmjs.com/package/@uiw/react-amap-weather) ![Open in unpkg](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-amap-weather/file/README.md)
@uiw/react-amap-auto-complete 输入提示 | ![bundle size](https://bundlephobia.com/package/@uiw/react-amap-auto-complete) ![bundle size(gzip)](https://bundlephobia.com/package/@uiw/react-amap-auto-complete) | ![npm version](https://www.npmjs.com/package/@uiw/react-amap-auto-complete) ![Open in unpkg](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-amap-auto-complete/file/README.md)

$3

Package | Bundle size(gzip) | Version/unpkg
----- | ----- | ----
@uiw/react-amap-require-script | ![bundle size](https://bundlephobia.com/package/@uiw/react-amap-require-script) ![bundle size(gzip)](https://bundlephobia.com/package/@uiw/react-amap-require-script) | ![npm version](https://www.npmjs.com/package/@uiw/react-amap-require-script) ![Open in unpkg](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-amap-require-script/file/README.md)
@uiw/react-amap-types 类型定义 | ![](https://www.npmjs.com/package/@uiw/react-amap-types) | ![npm version](https://www.npmjs.com/package/@uiw/react-amap-types) ![Open in unpkg](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-amap-types/file/README.md)
@uiw/react-amap-utils | ![bundle size](https://bundlephobia.com/package/@uiw/react-amap-utils) ![bundle size(gzip)](https://bundlephobia.com/package/@uiw/react-amap-utils) | ![npm version](https://www.npmjs.com/package/@uiw/react-amap-utils) ![Open in unpkg](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-amap-utils/file/README.md)

$3

`bash
npm install # Step 1: 安装依赖
npm run build # Step 2: 编译所有包

npm run start # 文档网站运行
npm run watch:amap # 监听编译输出 js 文件, 监听编译输出 .d.ts 类型文件
``

$3

- @uiw/react-baidu-map 百度地图 React 组件
- 高德拾取坐标系统
- 官方示例中心
- 高德地图 JSAPI 2.0

$3

As always, thanks to our amazing contributors!

Made with contributors.

$3

Licensed under the MIT License.