9 Star 77 Fork 15

uiw / react-amap

Create your Gitee Account
Explore and code with more than 6 million developers,Free private repositories !:)
Sign up
Clone or Download
Cancel
Notice: Creating folder will generate an empty file .keep, because not support in Git
Loading...
README.md



高德地图 React 组件 logo

高德地图 React 组件

Build & Deploy Downloads Open in unpkg npm version Gitee Repo

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

使用

Open in CodeSandbox

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

容器组件

Package Bundle size(gzip) Version/unpkg
@uiw/react-amap 集成所有包 bundle size bundle size(gzip) npm version Open in unpkg
@uiw/react-amap-api-loader 加载 SDK (必须) bundle size bundle size(gzip) npm version Open in unpkg
@uiw/react-amap-map 加载地图(容器) bundle size bundle size(gzip) npm version Open in unpkg

控件组件

Package Bundle size(gzip) Version/unpkg
@uiw/react-amap-scale-control bundle size bundle size(gzip) npm version Open in unpkg
@uiw/react-amap-control-bar-control bundle size bundle size(gzip) npm version Open in unpkg
@uiw/react-amap-hawk-eye-control bundle size bundle size(gzip) npm version Open in unpkg
@uiw/react-amap-map-type-control bundle size bundle size(gzip) npm version Open in unpkg
@uiw/react-amap-tool-bar-control bundle size bundle size(gzip) npm version Open in unpkg

覆盖物

Package Bundle size(gzip) Version/unpkg
@uiw/react-amap-marker 点标记 bundle size bundle size(gzip) npm version Open in unpkg
@uiw/react-amap-text 文本标记 bundle size bundle size(gzip) npm version Open in unpkg
@uiw/react-amap-polyline 折线 bundle size bundle size(gzip) npm version Open in unpkg
@uiw/react-amap-circle 圆形 bundle size bundle size(gzip) npm version Open in unpkg
@uiw/react-amap-circle-marker 圆点标记 bundle size bundle size(gzip) npm version Open in unpkg
@uiw/react-amap-ellipse 圆形组件 bundle size bundle size(gzip) npm version Open in unpkg
@uiw/react-amap-rectangle 矩形 bundle size bundle size(gzip) npm version Open in unpkg
@uiw/react-amap-bezier-curve 贝塞尔曲线 bundle size bundle size(gzip) npm version Open in unpkg
@uiw/react-amap-polygon 多边形 bundle size bundle size(gzip) npm version Open in unpkg
@uiw/react-amap-polygon-editor 多边形 bundle size bundle size(gzip) npm version Open in unpkg
@uiw/react-amap-mass-marks 海量点 bundle size bundle size(gzip) npm version Open in unpkg

信息窗体 & 右键菜单

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

服务

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

其它

Package Bundle size(gzip) Version/unpkg
@uiw/react-amap-require-script bundle size bundle size(gzip) npm version Open in unpkg
@uiw/react-amap-types 类型定义 npm version Open in unpkg
@uiw/react-amap-utils bundle size bundle size(gzip) npm version Open in unpkg

开发

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

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

相关连接

Repository Comments ( 5 )

Sign in to post a comment

About

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

Releases (3)

All

react-amap

Contributors

All

Activities

Load More
can not load any more
JavaScript
1
https://gitee.com/uiw/react-amap.git
git@gitee.com:uiw/react-amap.git
uiw
react-amap
react-amap
master

Search

182229 41614e54 1850385 182230 7885ed45 1850385