slobber-react-amap

高德地图 React 组件

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

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

$3

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

安装

> 不依赖 uiw 组件库

``

bash

npm install @uiw/react-amap --save





使用

jsx

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 = () => (

  

    

      

      

      

              maximumAge={100000}

        borderRadius="5px"

        position="RB"

        offset={[16, 80]}

        zoomToAccuracy={true}

        showCircle={true}

      />

    

    

      {({ AMap, map, container }) => {

        return;

      }}

    

  

);

ReactDOM.render((

  

    

  

), _mount_);





组件



#### 容器



- APILoader 组件

- Map 组件



#### 控件



- ScaleControl 比例尺控件

- ToolBarControl 工具条控件

- MapTypeControl 工具条控件

- ControlBarControl 地图控件

- HawkEyeControl 鹰眼控件



#### 覆盖物



- Marker 点标记

- Text 文本标记

- Polyline 折线

- Circle 圆形

- Ellipse 圆形组件

- Rectangle 矩形

- BesizerCurve 贝塞尔曲线

- Polygon 多边形

- CircleMarker 圆点标记



#### 信息窗体



- InfoWindow 信息窗体



#### 右键菜单



- ContextMenu 右键菜单



#### 服务



- Weather 天气查询服务

- Geolocation 定位



#### 搜索



- AutoComplete 输入提示



开发

bash

npm install # 安装依赖



npm run watch # 监听编译输出 js 文件, 监听编译输出 .d.ts 类型文件

npm run start # 文档网站运行

安装

> 不依赖 uiw 组件库

``

bash

npm install @uiw/react-amap --save





使用

jsx

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 = () => (

  

    

      

      

      

              maximumAge={100000}

        borderRadius="5px"

        position="RB"

        offset={[16, 80]}

        zoomToAccuracy={true}

        showCircle={true}

      />

    

    

      {({ AMap, map, container }) => {

        return;

      }}

    

  

);

ReactDOM.render((

  

    

  

), _mount_);





组件



#### 容器



- APILoader 组件

- Map 组件



#### 控件



- ScaleControl 比例尺控件

- ToolBarControl 工具条控件

- MapTypeControl 工具条控件

- ControlBarControl 地图控件

- HawkEyeControl 鹰眼控件



#### 覆盖物



- Marker 点标记

- Text 文本标记

- Polyline 折线

- Circle 圆形

- Ellipse 圆形组件

- Rectangle 矩形

- BesizerCurve 贝塞尔曲线

- Polygon 多边形

- CircleMarker 圆点标记



#### 信息窗体



- InfoWindow 信息窗体



#### 右键菜单



- ContextMenu 右键菜单



#### 服务



- Weather 天气查询服务

- Geolocation 定位



#### 搜索



- AutoComplete 输入提示



开发

bash

npm install # 安装依赖



npm run watch # 监听编译输出 js 文件, 监听编译输出 .d.ts 类型文件

npm run start # 文档网站运行

高德地图 React 组件

$3

安装

使用

组件

开发

相关连接

slobber-react-amap

高德地图 React 组件

$3

安装

使用

组件

开发

相关连接