9 Star 60 Fork 22

uiw / react-baidu-map

加入 Gitee
与超过 600 万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README.md

百度地图 LOGO

百度地图 React 组件

Build & Deploy Downloads Open in unpkg npm version Gitee Repo

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

文档实例预览: Github | Gitee

特性

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

安装

不依赖 uiw 组件库

npm install @uiw/react-baidu-map --save

使用

import ReactDOM from 'react-dom';
import { Map, APILoader } from '@uiw/react-baidu-map';

const Demo = () => (
  <div style={{ width: '100%', height: '300px' }}>
    <APILoader akay="GTrnXa5hwXGwgQnTBG28SHBubErMKm3f">
      <Map center="杭州"/>
      <Map center="上海">
        {({ AMap, map, container }) => {
          return;
        }}
      </Map>
    </APILoader>
  </div>
);
ReactDOM.render(<Demo />, _mount_);

容器组件

Package Bundle size(gzip) Version/unpkg
@uiw/react-baidu-map 集成所有包,懒人包,不比安装其它包 bundle size bundle size(gzip) npm version Open in unpkg
@uiw/react-baidu-map-api-loader 加载 SDK (必须) bundle size bundle size(gzip) npm version Open in unpkg
@uiw/react-baidu-map-map 加载地图(容器) bundle size bundle size(gzip) npm version Open in unpkg
@uiw/react-baidu-map-with-map bundle size bundle size(gzip) npm version Open in unpkg

控件组件

Package Bundle size(gzip) Version/unpkg
@uiw/react-baidu-map-control 自定义 bundle size bundle size(gzip) npm version Open in unpkg
@uiw/react-baidu-map-copyright-control 版权 bundle size bundle size(gzip) npm version Open in unpkg
@uiw/react-baidu-map-navigation-control 平移缩放 bundle size bundle size(gzip) npm version Open in unpkg
@uiw/react-baidu-map-geolocation-control 定位 bundle size bundle size(gzip) npm version Open in unpkg
@uiw/react-baidu-map-overview-map-control 缩略地图 bundle size bundle size(gzip) npm version Open in unpkg
@uiw/react-baidu-map-scale-control 比例尺 bundle size bundle size(gzip) npm version Open in unpkg
@uiw/react-baidu-map-type-control 地图类型 bundle size bundle size(gzip) npm version Open in unpkg
@uiw/react-baidu-map-panorama-control 全景地图 bundle size bundle size(gzip) npm version Open in unpkg

覆盖物

Package Bundle size(gzip) Version/unpkg
@uiw/react-baidu-map-marker 点标注组件 bundle size bundle size(gzip) npm version Open in unpkg
@uiw/react-baidu-map-info-window 信息窗口 bundle size bundle size(gzip) npm version Open in unpkg
@uiw/react-baidu-map-label 文本标注 bundle size bundle size(gzip) npm version Open in unpkg
@uiw/react-baidu-map-point-collection 加载海量点 bundle size bundle size(gzip) npm version Open in unpkg
@uiw/react-baidu-map-polyline 折线组件 bundle size bundle size(gzip) npm version Open in unpkg
@uiw/react-baidu-map-polygon 多边形组件 bundle size bundle size(gzip) npm version Open in unpkg
@uiw/react-baidu-map-circle bundle size bundle size(gzip) npm version Open in unpkg
@uiw/react-baidu-map-ground-overlay 地面叠加层 bundle size bundle size(gzip) npm version Open in unpkg
@uiw/react-baidu-map-canvas-layer 自定义Canvas bundle size bundle size(gzip) npm version Open in unpkg
@uiw/react-baidu-map-custom-overlay 自定义覆盖物 bundle size bundle size(gzip) npm version Open in unpkg
@uiw/react-baidu-map-tile-layer 地图图层 bundle size bundle size(gzip) npm version Open in unpkg
@uiw/react-baidu-map-require-script 加载第三方包 bundle size bundle size(gzip) npm version Open in unpkg
@uiw/react-baidu-map-curve-line 弧线组件 bundle size bundle size(gzip) npm version Open in unpkg
@uiw/react-baidu-map-drawing-manager 鼠标绘制工具 bundle size bundle size(gzip) npm version Open in unpkg

其它

Package Bundle size(gzip) Version/unpkg
@uiw/react-baidu-map-types 类型定义 npm version Open in unpkg
@uiw/react-baidu-map-utils 鼠标绘制工具 bundle size bundle size(gzip) npm version Open in unpkg
@uiw/react-baidu-map-require-script 鼠标绘制工具 bundle size bundle size(gzip) npm version Open in unpkg

开发

npm install # 安装依赖

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

相关连接

仓库评论 ( 9 )

你可以在登录后,发表评论

简介

这是一个基于 React 封装的百度地图组件,帮助你轻松的接入地图到 React 项目中,支持 React Hook。 展开 收起
TypeScript 等 3 种语言
MIT
取消

发行版 (2)

全部

react-baidu-map

贡献者

全部

近期动态

加载更多
不能加载更多了
TypeScript
1
https://gitee.com/uiw/react-baidu-map.git
git@gitee.com:uiw/react-baidu-map.git
uiw
react-baidu-map
react-baidu-map
master

搜索帮助