代码拉取完成,页面将自动刷新
同步操作将从 uiw/react-amap 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
这是一个基于 React 封装的高德地图组件,帮助你轻松的接入地图到 React 项目中。除了必须引用的 APILoader/Map 组件外,我们目前提供了最常用的地图组件,能满足大部分简单的业务场景;如果你有更复杂的需求,或者觉得默认提供的组件功能不够,可以使用 Map 组件返回的地图实例,完全自定义一个地图组件,然后根据高德原生 API 做高德允许你做的一切事情。
文档实例预览: Github Web | Gitee Web
不依赖
uiw
组件库
# 集成了所有依赖包
npm install @uiw/react-amap --save
# 或者按需安装包
npm install @uiw/react-amap-map @uiw/react-amap-api-loader --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>
<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" akay="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-text 文本标记 |
||
@uiw/react-amap-polyline 折线 |
||
@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 海量点 |
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 类型文件
As always, thanks to our amazing contributors!
Made with github-action-contributors.
Licensed under the MIT License.
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。