Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/uiwjs/react-baidu-map
基于 React 封装的百度地图组件，支持 React Hook，帮助你轻松的接入地图到 React 项目中。
https://github.com/uiwjs/react-baidu-map
baidu baidu-map map react react-baidu-map react-component react16-8 react18 reactjs typescript
Last synced: 2 days ago
JSON representation
基于 React 封装的百度地图组件，支持 React Hook，帮助你轻松的接入地图到 React 项目中。
- Host: GitHub
- URL: https://github.com/uiwjs/react-baidu-map
- Owner: uiwjs
- License: mit
- Created: 2019-11-18T16:20:20.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2024-12-05T21:01:56.000Z (16 days ago)
- Last Synced: 2024-12-13T06:05:00.126Z (9 days ago)
- Topics: baidu, baidu-map, map, react, react-baidu-map, react-component, react16-8, react18, reactjs, typescript
- Language: TypeScript
- Homepage: https://uiwjs.github.io/react-baidu-map
- Size: 226 MB
- Stars: 225
- Watchers: 7
- Forks: 22
- Open Issues: 47
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome - uiwjs/react-baidu-map - 基于 React 封装的百度地图组件，支持 React Hook，帮助你轻松的接入地图到 React 项目中。 (TypeScript)
README
百度地图 React 组件
这是一个基于 React 封装的百度地图组件，帮助你轻松的接入地图到 React 项目中。除了必须引用的 APILoader/Map 组件外，我们目前提供了最常用的地图组件，能满足大部分简单的业务场景；如果你有更复杂的需求，或者觉得默认提供的组件功能不够，可以使用 Map 组件返回的地图实例，完全自定义一个地图组件，然后根据百度地图原生 API 做百度地图允许你做的一切事情。
文档实例预览: [Github](https://uiwjs.github.io/react-baidu-map/) | [Gitee](https://uiw.gitee.io/react-baidu-map/)
> [!WARNING]
> 百度地图的 key 删除了，一些人开发直接复制 key ，导致申请的百度地图开发者 key 流量用完了。
## 特性
- ♻️ 自动加载百度地图 SDK（通过创建 Script 标签的形式加载），包括第三方 SDK。
- 📚 使用 Typescript 编写，集成百度地图 SDK [@type](https://github.com/uiwjs/react-baidu-map/tree/master/packages/types) 声明文件（包括中文注释）。
- ⚛️ 支持 React Hook 新增特性（需要 React 16.8+）。
- 💝 不依赖任何第三方组件。
## 安装
> 不依赖 [`uiw`](https://github.com/uiwjs/uiw) 组件库
```bash
npm install @uiw/react-baidu-map --save
```
## 使用
```jsx mdx:preview
import React from 'react';
import { Map, APILoader } from '@uiw/react-baidu-map';
const Demo = () => (
{({ BMap, map, container }) => {
return;
}}
);
export default Demo;
```
## 容器组件
Package | Bundle size(gzip) | Version/unpkg
----- | ----- | ----
[`@uiw/react-baidu-map`](https://uiwjs.github.io/react-baidu-map/) **懒人包**
集成所有包，不必安装其它包 | [](https://bundlephobia.com/package/@uiw/react-baidu-map) [](https://bundlephobia.com/package/@uiw/react-baidu-map) | [](https://www.npmjs.com/package/@uiw/react-baidu-map) [](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-baidu-map/file/README.md)
[`@uiw/react-baidu-map-api-loader`](https://uiwjs.github.io/react-amap/#/api-loader) 加载 SDK (必须) | [](https://bundlephobia.com/package/@uiw/react-baidu-map-api-loader) [](https://bundlephobia.com/package/@uiw/react-baidu-map-api-loader) | [](https://www.npmjs.com/package/@uiw/react-baidu-map-api-loader) [](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-baidu-map-api-loader/file/README.md)
[`@uiw/react-baidu-map-map`](https://uiwjs.github.io/react-amap/#/map) 加载地图(容器) | [](https://bundlephobia.com/package/@uiw/react-baidu-map-map) [](https://bundlephobia.com/package/@uiw/react-baidu-map-map) | [](https://www.npmjs.com/package/@uiw/react-baidu-map-map) [](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-baidu-map-map/file/README.md)
[`@uiw/react-baidu-map-with-map`](https://uiwjs.github.io/react-amap/#/with-map) | [](https://bundlephobia.com/package/@uiw/react-baidu-map-with-map) [](https://bundlephobia.com/package/@uiw/react-baidu-map-with-map) | [](https://www.npmjs.com/package/@uiw/react-baidu-map-with-map) [](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-baidu-map-with-map/file/README.md)
## 控件组件
Package | Bundle size(gzip) | Version/unpkg
----- | ----- | ----
[`@uiw/react-baidu-map-control`](https://uiwjs.github.io/react-baidu-map/#/control) 自定义 | [](https://bundlephobia.com/package/@uiw/react-baidu-map-control) [](https://bundlephobia.com/package/@uiw/react-baidu-map-control) | [](https://www.npmjs.com/package/@uiw/react-baidu-map-control) [](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-baidu-map-control/file/README.md)
[`@uiw/react-baidu-map-copyright-control`](https://uiwjs.github.io/react-baidu-map/#/copyright-control) 版权 | [](https://bundlephobia.com/package/@uiw/react-baidu-map-copyright-control) [](https://bundlephobia.com/package/@uiw/react-baidu-map-copyright-control) | [](https://www.npmjs.com/package/@uiw/react-baidu-map-copyright-control) [](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-baidu-map-copyright-control/file/README.md)
[`@uiw/react-baidu-map-navigation-control`](https://uiwjs.github.io/react-baidu-map/#/navigation-control) 平移缩放 | [](https://bundlephobia.com/package/@uiw/react-baidu-map-navigation-control) [](https://bundlephobia.com/package/@uiw/react-baidu-map-navigation-control) | [](https://www.npmjs.com/package/@uiw/react-baidu-map-navigation-control) [](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-baidu-map-navigation-control/file/README.md)
[`@uiw/react-baidu-map-geolocation-control`](https://uiwjs.github.io/react-baidu-map/#/geolocation-control) 定位 | [](https://bundlephobia.com/package/@uiw/react-baidu-map-geolocation-control) [](https://bundlephobia.com/package/@uiw/react-baidu-map-geolocation-control) | [](https://www.npmjs.com/package/@uiw/react-baidu-map-geolocation-control) [](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-baidu-map-geolocation-control/file/README.md)
[`@uiw/react-baidu-map-overview-map-control`](https://uiwjs.github.io/react-baidu-map/#/map-control) 缩略地图 | [](https://bundlephobia.com/package/@uiw/react-baidu-map-overview-map-control) [](https://bundlephobia.com/package/@uiw/react-baidu-map-overview-map-control) | [](https://www.npmjs.com/package/@uiw/react-baidu-map-overview-map-control) [](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-baidu-map-overview-map-control/file/README.md)
[`@uiw/react-baidu-map-scale-control`](https://uiwjs.github.io/react-baidu-map/#/scale-control) 比例尺 | [](https://bundlephobia.com/package/@uiw/react-baidu-map-scale-control) [](https://bundlephobia.com/package/@uiw/react-baidu-map-scale-control) | [](https://www.npmjs.com/package/@uiw/react-baidu-map-scale-control) [](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-baidu-map-scale-control/file/README.md)
[`@uiw/react-baidu-map-type-control`](https://uiwjs.github.io/react-baidu-map/#/type-control) 地图类型 | [](https://bundlephobia.com/package/@uiw/react-baidu-map-type-control) [](https://bundlephobia.com/package/@uiw/react-baidu-map-type-control) | [](https://www.npmjs.com/package/@uiw/react-baidu-map-type-control) [](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-baidu-map-type-control/file/README.md)
[`@uiw/react-baidu-map-panorama-control`](https://uiwjs.github.io/react-baidu-map/#/panorama-control) 全景地图 | [](https://bundlephobia.com/package/@uiw/react-baidu-map-panorama-control) [](https://bundlephobia.com/package/@uiw/react-baidu-map-panorama-control) | [](https://www.npmjs.com/package/@uiw/react-baidu-map-panorama-control) [](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-baidu-map-panorama-control/file/README.md)
## 覆盖物
Package | Bundle size(gzip) | Version/unpkg
----- | ----- | ----
[`@uiw/react-baidu-map-marker`](https://uiwjs.github.io/react-baidu-map/#/marker) 点标注组件 | [](https://bundlephobia.com/package/@uiw/react-baidu-map-marker) [](https://bundlephobia.com/package/@uiw/react-baidu-map-marker) | [](https://www.npmjs.com/package/@uiw/react-baidu-map-marker) [](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-baidu-map-marker/file/README.md)
[`@uiw/react-baidu-map-info-window`](https://uiwjs.github.io/react-baidu-map/#/info-window) 信息窗口 | [](https://bundlephobia.com/package/@uiw/react-baidu-map-info-window) [](https://bundlephobia.com/package/@uiw/react-baidu-map-info-window) | [](https://www.npmjs.com/package/@uiw/react-baidu-map-info-window) [](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-baidu-map-info-window/file/README.md)
[`@uiw/react-baidu-map-label`](https://uiwjs.github.io/react-baidu-map/#/label) 文本标注 | [](https://bundlephobia.com/package/@uiw/react-baidu-map-label) [](https://bundlephobia.com/package/@uiw/react-baidu-map-label) | [](https://www.npmjs.com/package/@uiw/react-baidu-map-label) [](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-baidu-map-label/file/README.md)
[`@uiw/react-baidu-map-point-collection`](https://uiwjs.github.io/react-baidu-map/#/point-collection) 加载海量点 | [](https://bundlephobia.com/package/@uiw/react-baidu-map-point-collection) [](https://bundlephobia.com/package/@uiw/react-baidu-map-point-collection) | [](https://www.npmjs.com/package/@uiw/react-baidu-map-point-collection) [](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-baidu-map-point-collection/file/README.md)
[`@uiw/react-baidu-map-polyline`](https://uiwjs.github.io/react-baidu-map/#/polyline) 折线组件 | [](https://bundlephobia.com/package/@uiw/react-baidu-map-polyline) [](https://bundlephobia.com/package/@uiw/react-baidu-map-polyline) | [](https://www.npmjs.com/package/@uiw/react-baidu-map-polyline) [](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-baidu-map-polyline/file/README.md)
[`@uiw/react-baidu-map-polygon`](https://uiwjs.github.io/react-baidu-map/#/polygon) 多边形组件 | [](https://bundlephobia.com/package/@uiw/react-baidu-map-polygon) [](https://bundlephobia.com/package/@uiw/react-baidu-map-polygon) | [](https://www.npmjs.com/package/@uiw/react-baidu-map-polygon) [](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-baidu-map-polygon/file/README.md)
[`@uiw/react-baidu-map-circle`](https://uiwjs.github.io/react-baidu-map/#/circle) 圆 | [](https://bundlephobia.com/package/@uiw/react-baidu-map-circle) [](https://bundlephobia.com/package/@uiw/react-baidu-map-circle) | [](https://www.npmjs.com/package/@uiw/react-baidu-map-circle) [](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-baidu-map-circle/file/README.md)
[`@uiw/react-baidu-map-ground-overlay`](https://uiwjs.github.io/react-baidu-map/#/ground-overlay) 地面叠加层 | [](https://bundlephobia.com/package/@uiw/react-baidu-map-ground-overlay) [](https://bundlephobia.com/package/@uiw/react-baidu-map-ground-overlay) | [](https://www.npmjs.com/package/@uiw/react-baidu-map-ground-overlay) [](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-baidu-map-ground-overlay/file/README.md)
[`@uiw/react-baidu-map-canvas-layer`](https://uiwjs.github.io/react-baidu-map/#/canvas-layer) 自定义Canvas | [](https://bundlephobia.com/package/@uiw/react-baidu-map-canvas-layer) [](https://bundlephobia.com/package/@uiw/react-baidu-map-canvas-layer) | [](https://www.npmjs.com/package/@uiw/react-baidu-map-canvas-layer) [](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-baidu-map-canvas-layer/file/README.md)
[`@uiw/react-baidu-map-custom-overlay`](https://uiwjs.github.io/react-baidu-map/#/custom-overlay) 自定义覆盖物 | [](https://bundlephobia.com/package/@uiw/react-baidu-map-custom-overlay) [](https://bundlephobia.com/package/@uiw/react-baidu-map-custom-overlay) | [](https://www.npmjs.com/package/@uiw/react-baidu-map-custom-overlay) [](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-baidu-map-custom-overlay/file/README.md)
[`@uiw/react-baidu-map-tile-layer`](https://uiwjs.github.io/react-baidu-map/#/tile-layer) 地图图层 | [](https://bundlephobia.com/package/@uiw/react-baidu-map-tile-layer) [](https://bundlephobia.com/package/@uiw/react-baidu-map-tile-layer) | [](https://www.npmjs.com/package/@uiw/react-baidu-map-tile-layer) [](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-baidu-map-tile-layer/file/README.md)
[`@uiw/react-baidu-map-require-script`](https://uiwjs.github.io/react-baidu-map/#/require-script) 加载第三方包 | [](https://bundlephobia.com/package/@uiw/react-baidu-map-require-script) [](https://bundlephobia.com/package/@uiw/react-baidu-map-require-script) | [](https://www.npmjs.com/package/@uiw/react-baidu-map-require-script) [](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-baidu-map-require-script/file/README.md)
[`@uiw/react-baidu-map-curve-line`](https://uiwjs.github.io/react-baidu-map/#/curve-line) 弧线组件 | [](https://bundlephobia.com/package/@uiw/react-baidu-map-curve-line) [](https://bundlephobia.com/package/@uiw/react-baidu-map-curve-line) | [](https://www.npmjs.com/package/@uiw/react-baidu-map-curve-line) [](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-baidu-map-curve-line/file/README.md)
[`@uiw/react-baidu-map-drawing-manager`](https://uiwjs.github.io/react-baidu-map/#/drawing-manager) 鼠标绘制工具 | [](https://bundlephobia.com/package/@uiw/react-baidu-map-drawing-manager) [](https://bundlephobia.com/package/@uiw/react-baidu-map-drawing-manager) | [](https://www.npmjs.com/package/@uiw/react-baidu-map-drawing-manager) [](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-baidu-map-drawing-manager/file/README.md)
## 其它
Package | Bundle size(gzip) | Version/unpkg
----- | ----- | ----
[`@uiw/react-baidu-map-types`](https://uiwjs.github.io/react-baidu-map/#/types) 类型定义 | [](https://www.npmjs.com/package/@uiw/react-baidu-map-types) | [](https://www.npmjs.com/package/@uiw/react-baidu-map-types) [](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-baidu-map-types/file/README.md)
[`@uiw/react-baidu-map-utils`](https://uiwjs.github.io/react-baidu-map/#/utils) 鼠标绘制工具 | [](https://bundlephobia.com/package/@uiw/react-baidu-map-utils) [](https://bundlephobia.com/package/@uiw/react-baidu-map-utils) | [](https://www.npmjs.com/package/@uiw/react-baidu-map-utils) [](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-baidu-map-utils/file/README.md)
[`@uiw/react-baidu-map-require-script`](https://uiwjs.github.io/react-baidu-map/#/require-script) 鼠标绘制工具 | [](https://bundlephobia.com/package/@uiw/react-baidu-map-require-script) [](https://bundlephobia.com/package/@uiw/react-baidu-map-require-script) | [](https://www.npmjs.com/package/@uiw/react-baidu-map-require-script) [](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-baidu-map-require-script/file/README.md)
## 开发
```bash
npm install -g npm@7
npm install # 安装依赖
npm install --workspaces
npm run build # 编译输出组件 js 文件, .d.ts 类型文件
npm run watch # 监听编译输出 js 文件, .d.ts 类型文件
npm run start # 文档网站运行
```
## 相关连接
- [@uiw/react-amap](https://github.com/uiwjs/react-amap) 高德地图 React 组件
- [百度拾取坐标系统](https://api.map.baidu.com/lbsapi/getpoint/index.html)
- [百度地图官方 Demo 示例](https://lbsyun.baidu.com/jsdemo.htm)
- [百度地图 API v3.0](https://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference_3_0.html)
## Contributors
As always, thanks to our amazing contributors!
Made with [contributors](https://github.com/jaywcjlove/github-action-contributors).
## License
Licensed under the MIT License.