• Stars
    star
    393
  • Rank 107,240 (Top 3 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created almost 4 years ago
  • Updated about 1 month ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

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



高德地图 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

v4 升级到 v5APILoader 主要是对 APILoader 做了升级

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

使用

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>
    <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 集成所有包 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-label-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-tile-layer 文本标记 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-polyline-editor 折线编辑器 bundle size bundle size(gzip) npm version Open in unpkg
@uiw/react-amap-poly-editor 折线编辑器 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
@uiw/react-amap-mouse-tool 绘制工具 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 build       # Step 2: 编译所有包

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

相关连接

Contributors

As always, thanks to our amazing contributors!

Made with github-action-contributors.

License

Licensed under the MIT License.

More Repositories

1

province-city-china

🇨🇳最全最新中国【省、市、区县、乡镇街道】json,csv,sql数据
JavaScript
2,284
star
2

react-md-editor

A simple markdown editor with preview, implemented with React.js and TypeScript.
TypeScript
2,003
star
3

react-codemirror

CodeMirror 6 component for React. @codemirror https://uiwjs.github.io/react-codemirror/
TypeScript
1,484
star
4

uiw

⚛️ @uiwjs A high quality UI Toolkit, A Component Library for React 16+.
TypeScript
702
star
5

react-login-page

Some `react` login pages, which can be used quickly after installation.
TypeScript
533
star
6

react-textarea-code-editor

A simple code editor with syntax highlighting.
TypeScript
459
star
7

react-markdown-editor

A markdown editor with preview, implemented with React.js and TypeScript.
TypeScript
299
star
8

react-monacoeditor

Monaco Editor component for React.
TypeScript
284
star
9

react-markdown-preview

React component preview markdown text in web browser. The minimal amount of CSS to replicate the GitHub Markdown style. Support dark-mode/night mode.
TypeScript
248
star
10

react-color

🎨 Is a tiny color picker widget component for React apps.
TypeScript
238
star
11

react-baidu-map

基于 React 封装的百度地图组件,支持 React Hook,帮助你轻松的接入地图到 React 项目中。
TypeScript
216
star
12

react-native-alipay

基于 React Native 的宝支付包,已更新到最新的支付宝 SDK 版本,支持Android/iOS。
Java
199
star
13

react-heat-map

A lightweight calendar heatmap react component built on SVG, customizable version of GitHub's contribution graph.
TypeScript
178
star
14

react-json-view

A React component for displaying and editing javascript arrays and JSON objects.
TypeScript
154
star
15

icons

The premium icon font for @uiwjs Component Library. https://uiwjs.github.io/icons
HTML
138
star
16

npm-unpkg

A web application to view npm package files, Based on unpkg.
TypeScript
99
star
17

react-split

A piece of view can be divided into areas where the width or height can be adjusted by dragging.
TypeScript
60
star
18

react-code-preview

Code edit preview for React.
TypeScript
58
star
19

react-native-uiw

A UI component library based on React Native (Android & iOS).
TypeScript
44
star
20

json-viewer

Online JSON Viewer, JSON Beautifier to beautify and tree view of JSON data - It works as JSON Pretty Print to pretty print JSON data.
TypeScript
42
star
21

react-native-amap-geolocation

React Native 高德地图定位模块,支持 Android/iOS。
Java
41
star
22

react-signature

A signature board component for react.
TypeScript
34
star
23

react-watermark

A react component that adds a watermark to an area of a web page.
TypeScript
31
star
24

react-native-wechat

React Native 包使用微信分享、登录、收藏、支付等功能,支持Android/iOS。
Java
30
star
25

file-icons

File icons in the file tree.
HTML
29
star
26

uiw-admin

UIW-Admin Panel Framework, Powered by React and @uiwjs.
TypeScript
22
star
27

babel-plugin-transform-remove-imports

Remove the specified import declaration when you use the babel transform to build the package.
JavaScript
21
star
28

react-run-web

Online Code Editor for Rapid Web Development.
TypeScript
20
star
29

react-native-template

React Native template for react-native-uiw.
JavaScript
17
star
30

react-mac-keyboard

Macbook computer keyboard style for react component.
TypeScript
17
star
31

next-remove-imports

The default behavior is to remove all .less/.css/.scss/.sass/.styl imports from all packages in node_modules.
JavaScript
17
star
32

ui-color

Converting HEX & RGB colors to UIColor/NSColor/Color for both Objective C & Swift.
TypeScript
16
star
33

copy-to-clipboard

Copy text to the clipboard in modern browsers
JavaScript
16
star
34

react-use-online

useOnline is a tiny, zero-dependency hook for responding to online/offline changes.
TypeScript
16
star
35

reset-css

A tiny modern CSS reset.
CSS
14
star
36

keycode-info

A simple web page that responds to the pressed key and returns information about the JavaScript'on-key press' key.
TypeScript
14
star
37

react-iframe

This component allows you to wrap your entire React application or each component in an <iframe>.
TypeScript
12
star
38

react-codesandbox

A React component is provided that allows you to programmatically generate codesandbox projects from code samples on the fly.
TypeScript
11
star
39

react-github-corners

Add a Github corner to your project page, This GitHub corner for react component/web component.
TypeScript
11
star
40

react-only-when

A declarative component for conditional rendering.
TypeScript
9
star
41

bootstrap-icons

Official open source SVG icon library for Bootstrap.
8
star
42

uiwjs.github.io

The official documentation site for @uiwjs. https://uiwjs.github.io
8
star
43

react-clock

An analog clock for your React app.
TypeScript
7
star
44

vscode-uiw

Preview uiw document in vscode.
TypeScript
7
star
45

react-layout

Layout component for React. Handling the overall layout of a page.
TypeScript
7
star
46

react-csv-reader

React component that handles csv file input and its parsing.
TypeScript
7
star
47

react-use-colorscheme

useColorScheme() provides access to the devices color scheme.
TypeScript
7
star
48

react-native-transport-location

Objective-C
6
star
49

react-code-preview-layout

A react component showing the layout of `code` and `code preview example`.
TypeScript
6
star
50

date-formatter

Get a formatted date.
TypeScript
6
star
51

react-prismjs

React Component for prismjs.
TypeScript
6
star
52

react-tabs-draggable

Draggable tabs for React.
TypeScript
5
star
53

react-markdown-preview-example

Preview the markdown files and run the React examples in the documentation.
TypeScript
5
star
54

react-head

React components will manage your changes to the document head
TypeScript
4
star
55

react-shields

Shields.io for react component, Quality metadata badges for open source projects.
TypeScript
4
star
56

react-codepen

A React component is provided that allows you to programmatically generate codepen projects from code samples on the fly.
TypeScript
4
star
57

react-stackblitz

A React component is provided that allows you to programmatically generate stackblitz projects from code samples on the fly.
TypeScript
4
star
58

react-back-to-top

A minimal lightweight react component for adding a nice scroll up (back to top) button with onScroll progress.
TypeScript
4
star
59

react-monorepo-template

Simple React package development project example template.
TypeScript
3
star
60

auto-gitee-mirror

Use GitHub Actions to sync from GitHub to Gitee
3
star
61

react-keywords

Highlight a keyword in a piece of text and return a React element.
TypeScript
3
star
62

css-filter

A filter CSS generator that helps you quickly generate filter CSS declarations for your website. It comes with many options and it demonstrates instantly.
TypeScript
3
star
63

babel-plugin-transform-uiw-import

Modular import plugin for babel.
JavaScript
2
star
64

react-xml-reader

React component that handles xml file input and its parsing.
TypeScript
2
star
65

rematch-loading

Loading indicator plugin for @rematch.
TypeScript
1
star
66

logo

Source files of uiw's logo.
1
star
67

.github

Welcome to the uiwjs organization.
1
star