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

使用

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_);

组件

容器

• APILoader 组件
• Map 组件

控件

• ScaleControl 比例尺控件
• ToolBarControl 工具条控件
• MapTypeControl 工具条控件
• ControlBarControl 地图控件
• HawkEyeControl 鹰眼控件

覆盖物

• Marker 点标记
• Text 文本标记
• Polyline 折线
• Circle 圆形
• Ellipse 圆形组件
• Rectangle 矩形
• BesizerCurve 贝塞尔曲线
• Polygon 多边形
• CircleMarker 圆点标记

信息窗体

• InfoWindow 信息窗体

右键菜单

• ContextMenu 右键菜单

服务

• Weather 天气查询服务
• Geolocation 定位

搜索

• AutoComplete 输入提示

开发

npm install # 安装依赖

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

相关连接

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