@uiw/react-amap NPM

这是一个基于 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

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

 <APILoader
-  akay
-  protocol
-  hostAndPath
-  callbackName
-  plugin
-  disableScripts
+  akey
+  plugins
+  AMapUI
+  Loca
>
  <Map style={{ height: 100 }} />
 </APILoader>

使用

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` 集成所有包
`@uiw/react-amap-api-loader` 加载 SDK (必须)
`@uiw/react-amap-map` 加载地图(容器)

控件组件

Package	Bundle size(gzip)	Version/unpkg
`@uiw/react-amap-scale-control`
`@uiw/react-amap-control-bar-control`
`@uiw/react-amap-hawk-eye-control`
`@uiw/react-amap-map-type-control`
`@uiw/react-amap-tool-bar-control`

覆盖物

Package	Bundle size(gzip)	Version/unpkg
`@uiw/react-amap-marker` 点标记
`@uiw/react-amap-label-marker` 点标记
`@uiw/react-amap-text` 文本标记
`@uiw/react-amap-tile-layer` 文本标记
`@uiw/react-amap-polyline` 折线
`@uiw/react-amap-polyline-editor` 折线编辑器
`@uiw/react-amap-poly-editor` 折线编辑器
`@uiw/react-amap-circle` 圆形
`@uiw/react-amap-circle-marker` 圆点标记
`@uiw/react-amap-ellipse` 圆形组件
`@uiw/react-amap-rectangle` 矩形
`@uiw/react-amap-bezier-curve` 贝塞尔曲线
`@uiw/react-amap-polygon` 多边形
`@uiw/react-amap-polygon-editor` 多边形
`@uiw/react-amap-mass-marks` 海量点
`@uiw/react-amap-mouse-tool` 绘制工具

信息窗体 & 右键菜单

Package	Bundle size(gzip)	Version/unpkg
`@uiw/react-amap-info-window` 信息窗体
`@uiw/react-amap-context-menu` 右键菜单

服务

Package	Bundle size(gzip)	Version/unpkg
`@uiw/react-amap-geolocation` 定位
`@uiw/react-amap-weather` 天气查询服务
`@uiw/react-amap-auto-complete` 输入提示

其它

Package	Bundle size(gzip)	Version/unpkg
`@uiw/react-amap-require-script`
`@uiw/react-amap-types` 类型定义
`@uiw/react-amap-utils`

开发

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

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