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

<br /><br /> <p align="center"> <a href="https://github.com/uiwjs/react-amap"> <img src="https://uiwjs.github.io/react-amap/logo.svg" height="80px" alt="高德地图 React 组件 logo" /> </a> </p> <h3 align="center">高德地图 React 组件</h3> <p align="center"> <a href="https://jaywcjlove.github.io/#/sponsor" target="__blank"> <img alt="Buy me a coffee" src="https://img.shields.io/badge/Buy%20me%20a%20coffee-048754?logo=buymeacoffee"> </a> <a href="https://github.com/uiwjs/react-amap/actions"> <img src="https://github.com/uiwjs/react-amap/actions/workflows/ci.yml/badge.svg" alt="Build & Deploy"> </a> <a href="https://www.npmjs.com/package/@uiw/react-amap"> <img src="https://img.shields.io/npm/dm/@uiw/react-amap.svg?style=flat" alt="Downloads"> </a> <a href="https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-amap/file/README.md"> <img src="https://img.shields.io/badge/Open%20in-unpkg-blue" alt="Open in unpkg"> </a> <a href="https://www.npmjs.com/package/@uiw/react-amap"> <img src="https://img.shields.io/npm/v/@uiw/react-amap.svg" alt="npm version"> </a> <a href="https://gitee.com/uiw/react-amap"> <img src="https://jaywcjlove.github.io/sb/ico/gitee.svg" alt="Gitee Repo"> </a> </p> 这是一个基于 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 <APILoader - akay - protocol - hostAndPath - callbackName - plugin - disableScripts + akey + plugins + AMapUI + Loca > <Map style={{ height: 100 }} /> </APILoader> ``` ### 使用 [](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 = () => ( <div> <Map style={{ height: 300 }}> <ScaleControl offset={[16, 30]} position="LB" /> <ToolBarControl offset={[16, 10]} position="RB" /> <ControlBarControl offset={[16, 180]} position="RB" /> <Geolocation maximumAge={100000} borderRadius="5px" position="RB" offset={[16, 80]} zoomToAccuracy={true} showCircle={true} /> </Map> <Map style={{ height: 300 }}> {({ AMap, map, container }) => { return; }} </Map> </div> ); const Mount = () => ( <APILoader version="2.0.5" akey="a7a90e05a37d3f6bf76d4a9032fc9129"> <Demo /> </APILoader> ) 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) [![bundle size(gzip)]