这是一个基于 React 封装的高德地图组件,帮助你轻松的接入地图到 React 项目中。除了必须引用的 APILoader/Map 组件外,我们目前提供了最常用的地图组件,能满足大部分简单的业务场景;如果你有更复杂的需求,或者觉得默认提供的组件功能不够,可以使用 Map 组件返回的地图实例,完全自定义一个地图组件,然后根据高德原生 API 做高德允许你做的一切事情。
文档实例预览: Github Web | Gitee Web
- ♻️ 自动加载高德地图 SDK(通过创建 Script 标签的形式加载),包括第三方 SDK。
- 📚 使用 Typescript 编写,集成高德地图 SDK @type 声明文件(包括中文注释)。
- ⚛️ 支持 React Hook 新增特性(需要 React 16.8+)。
- 💝 不依赖任何第三方组件。
- 📦 拆分成多个包,按需使用包。
不依赖 uiw
组件库
# 集成了所有依赖包
npm install @uiw/react-amap --save
# 或者按需安装包
npm install @uiw/react-amap-map @uiw/react-amap-api-loader --save
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 style={{ width: '100%', height: '300px' }}>
<Map>
<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>
{({ AMap, map, container }) => {
return;
}}
</Map>
</div>
);
ReactDOM.render((
<APILoader akay="a7a90e05a37d3f6bf76d4a9032fc9129">
<Demo />
</APILoader>
), _mount_);
npm install # Step 1: 安装依赖
npm run hoist # Step 2: 安装子包依赖
npm run build # Step 3: 编译所有包
npm run watch:amap # 监听编译输出 js 文件, 监听编译输出 .d.ts 类型文件
npm run start # 文档网站运行