@uiw/react-baidu-map

^{使用 我的应用 也是一种 支持 我的方式：}

百度地图 React 组件

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


文档实例预览: Github | Gitee

> [!WARNING]
> 百度地图的 key 删除了，一些人开发直接复制 key ，导致申请的百度地图开发者 key 流量用完了。

特性

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

安装

> 不依赖 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 = () => (


export default Demo;
`

容器组件

Package | Bundle size(gzip) | Version/unpkg
----- | ----- | ----
@uiw/react-baidu-map 懒人包
集成所有包，不必安装其它包 | ![bundle size](https://bundlephobia.com/package/@uiw/react-baidu-map) ![bundle size(gzip)](https://bundlephobia.com/package/@uiw/react-baidu-map) | ![npm version](https://www.npmjs.com/package/@uiw/react-baidu-map) ![Open in unpkg](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-baidu-map/file/README.md)
@uiw/react-baidu-map-api-loader 加载 SDK (必须) | ![bundle size](https://bundlephobia.com/package/@uiw/react-baidu-map-api-loader) ![bundle size(gzip)](https://bundlephobia.com/package/@uiw/react-baidu-map-api-loader) | ![npm version](https://www.npmjs.com/package/@uiw/react-baidu-map-api-loader) ![Open in unpkg](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-baidu-map-api-loader/file/README.md)
@uiw/react-baidu-map-map 加载地图(容器) | ![bundle size](https://bundlephobia.com/package/@uiw/react-baidu-map-map) ![bundle size(gzip)](https://bundlephobia.com/package/@uiw/react-baidu-map-map) | ![npm version](https://www.npmjs.com/package/@uiw/react-baidu-map-map) ![Open in unpkg](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-baidu-map-map/file/README.md)
@uiw/react-baidu-map-with-map | ![bundle size](https://bundlephobia.com/package/@uiw/react-baidu-map-with-map) ![bundle size(gzip)](https://bundlephobia.com/package/@uiw/react-baidu-map-with-map) | ![npm version](https://www.npmjs.com/package/@uiw/react-baidu-map-with-map) ![Open in unpkg](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 自定义 | ![bundle size](https://bundlephobia.com/package/@uiw/react-baidu-map-control) ![bundle size(gzip)](https://bundlephobia.com/package/@uiw/react-baidu-map-control) | ![npm version](https://www.npmjs.com/package/@uiw/react-baidu-map-control) ![Open in unpkg](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-baidu-map-control/file/README.md)
@uiw/react-baidu-map-copyright-control 版权 | ![bundle size](https://bundlephobia.com/package/@uiw/react-baidu-map-copyright-control) ![bundle size(gzip)](https://bundlephobia.com/package/@uiw/react-baidu-map-copyright-control) | ![npm version](https://www.npmjs.com/package/@uiw/react-baidu-map-copyright-control) ![Open in unpkg](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-baidu-map-copyright-control/file/README.md)
@uiw/react-baidu-map-navigation-control 平移缩放 | ![bundle size](https://bundlephobia.com/package/@uiw/react-baidu-map-navigation-control) ![bundle size(gzip)](https://bundlephobia.com/package/@uiw/react-baidu-map-navigation-control) | ![npm version](https://www.npmjs.com/package/@uiw/react-baidu-map-navigation-control) ![Open in unpkg](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-baidu-map-navigation-control/file/README.md)
@uiw/react-baidu-map-geolocation-control 定位 | ![bundle size](https://bundlephobia.com/package/@uiw/react-baidu-map-geolocation-control) ![bundle size(gzip)](https://bundlephobia.com/package/@uiw/react-baidu-map-geolocation-control) | ![npm version](https://www.npmjs.com/package/@uiw/react-baidu-map-geolocation-control) ![Open in unpkg](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-baidu-map-geolocation-control/file/README.md)
@uiw/react-baidu-map-overview-map-control 缩略地图 | ![bundle size](https://bundlephobia.com/package/@uiw/react-baidu-map-overview-map-control) ![bundle size(gzip)](https://bundlephobia.com/package/@uiw/react-baidu-map-overview-map-control) | ![npm version](https://www.npmjs.com/package/@uiw/react-baidu-map-overview-map-control) ![Open in unpkg](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-baidu-map-overview-map-control/file/README.md)
@uiw/react-baidu-map-scale-control 比例尺 | ![bundle size](https://bundlephobia.com/package/@uiw/react-baidu-map-scale-control) ![bundle size(gzip)](https://bundlephobia.com/package/@uiw/react-baidu-map-scale-control) | ![npm version](https://www.npmjs.com/package/@uiw/react-baidu-map-scale-control) ![Open in unpkg](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-baidu-map-scale-control/file/README.md)
@uiw/react-baidu-map-type-control 地图类型 | ![bundle size](https://bundlephobia.com/package/@uiw/react-baidu-map-type-control) ![bundle size(gzip)](https://bundlephobia.com/package/@uiw/react-baidu-map-type-control) | ![npm version](https://www.npmjs.com/package/@uiw/react-baidu-map-type-control) ![Open in unpkg](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-baidu-map-type-control/file/README.md)
@uiw/react-baidu-map-panorama-control 全景地图 | ![bundle size](https://bundlephobia.com/package/@uiw/react-baidu-map-panorama-control) ![bundle size(gzip)](https://bundlephobia.com/package/@uiw/react-baidu-map-panorama-control) | ![npm version](https://www.npmjs.com/package/@uiw/react-baidu-map-panorama-control) ![Open in unpkg](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 点标注组件 | ![bundle size](https://bundlephobia.com/package/@uiw/react-baidu-map-marker) ![bundle size(gzip)](https://bundlephobia.com/package/@uiw/react-baidu-map-marker) | ![npm version](https://www.npmjs.com/package/@uiw/react-baidu-map-marker) ![Open in unpkg](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-baidu-map-marker/file/README.md)
@uiw/react-baidu-map-info-window 信息窗口 | ![bundle size](https://bundlephobia.com/package/@uiw/react-baidu-map-info-window) ![bundle size(gzip)](https://bundlephobia.com/package/@uiw/react-baidu-map-info-window) | ![npm version](https://www.npmjs.com/package/@uiw/react-baidu-map-info-window) ![Open in unpkg](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-baidu-map-info-window/file/README.md)
@uiw/react-baidu-map-label 文本标注 | ![bundle size](https://bundlephobia.com/package/@uiw/react-baidu-map-label) ![bundle size(gzip)](https://bundlephobia.com/package/@uiw/react-baidu-map-label) | ![npm version](https://www.npmjs.com/package/@uiw/react-baidu-map-label) ![Open in unpkg](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-baidu-map-label/file/README.md)
@uiw/react-baidu-map-point-collection 加载海量点 | ![bundle size](https://bundlephobia.com/package/@uiw/react-baidu-map-point-collection) ![bundle size(gzip)](https://bundlephobia.com/package/@uiw/react-baidu-map-point-collection) | ![npm version](https://www.npmjs.com/package/@uiw/react-baidu-map-point-collection) ![Open in unpkg](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-baidu-map-point-collection/file/README.md)
@uiw/react-baidu-map-polyline 折线组件 | ![bundle size](https://bundlephobia.com/package/@uiw/react-baidu-map-polyline) ![bundle size(gzip)](https://bundlephobia.com/package/@uiw/react-baidu-map-polyline) | ![npm version](https://www.npmjs.com/package/@uiw/react-baidu-map-polyline) ![Open in unpkg](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-baidu-map-polyline/file/README.md)
@uiw/react-baidu-map-polygon 多边形组件 | ![bundle size](https://bundlephobia.com/package/@uiw/react-baidu-map-polygon) ![bundle size(gzip)](https://bundlephobia.com/package/@uiw/react-baidu-map-polygon) | ![npm version](https://www.npmjs.com/package/@uiw/react-baidu-map-polygon) ![Open in unpkg](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-baidu-map-polygon/file/README.md)
@uiw/react-baidu-map-circle 圆 | ![bundle size](https://bundlephobia.com/package/@uiw/react-baidu-map-circle) ![bundle size(gzip)](https://bundlephobia.com/package/@uiw/react-baidu-map-circle) | ![npm version](https://www.npmjs.com/package/@uiw/react-baidu-map-circle) ![Open in unpkg](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-baidu-map-circle/file/README.md)
@uiw/react-baidu-map-ground-overlay 地面叠加层 | ![bundle size](https://bundlephobia.com/package/@uiw/react-baidu-map-ground-overlay) ![bundle size(gzip)](https://bundlephobia.com/package/@uiw/react-baidu-map-ground-overlay) | ![npm version](https://www.npmjs.com/package/@uiw/react-baidu-map-ground-overlay) ![Open in unpkg](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-baidu-map-ground-overlay/file/README.md)
@uiw/react-baidu-map-canvas-layer 自定义Canvas | ![bundle size](https://bundlephobia.com/package/@uiw/react-baidu-map-canvas-layer) ![bundle size(gzip)](https://bundlephobia.com/package/@uiw/react-baidu-map-canvas-layer) | ![npm version](https://www.npmjs.com/package/@uiw/react-baidu-map-canvas-layer) ![Open in unpkg](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-baidu-map-canvas-layer/file/README.md)
@uiw/react-baidu-map-custom-overlay 自定义覆盖物 | ![bundle size](https://bundlephobia.com/package/@uiw/react-baidu-map-custom-overlay) ![bundle size(gzip)](https://bundlephobia.com/package/@uiw/react-baidu-map-custom-overlay) | ![npm version](https://www.npmjs.com/package/@uiw/react-baidu-map-custom-overlay) ![Open in unpkg](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-baidu-map-custom-overlay/file/README.md)
@uiw/react-baidu-map-tile-layer 地图图层 | ![bundle size](https://bundlephobia.com/package/@uiw/react-baidu-map-tile-layer) ![bundle size(gzip)](https://bundlephobia.com/package/@uiw/react-baidu-map-tile-layer) | ![npm version](https://www.npmjs.com/package/@uiw/react-baidu-map-tile-layer) ![Open in unpkg](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-baidu-map-tile-layer/file/README.md)
@uiw/react-baidu-map-require-script 加载第三方包 | ![bundle size](https://bundlephobia.com/package/@uiw/react-baidu-map-require-script) ![bundle size(gzip)](https://bundlephobia.com/package/@uiw/react-baidu-map-require-script) | ![npm version](https://www.npmjs.com/package/@uiw/react-baidu-map-require-script) ![Open in unpkg](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-baidu-map-require-script/file/README.md)
@uiw/react-baidu-map-curve-line 弧线组件 | ![bundle size](https://bundlephobia.com/package/@uiw/react-baidu-map-curve-line) ![bundle size(gzip)](https://bundlephobia.com/package/@uiw/react-baidu-map-curve-line) | ![npm version](https://www.npmjs.com/package/@uiw/react-baidu-map-curve-line) ![Open in unpkg](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-baidu-map-curve-line/file/README.md)
@uiw/react-baidu-map-drawing-manager 鼠标绘制工具 | ![bundle size](https://bundlephobia.com/package/@uiw/react-baidu-map-drawing-manager) ![bundle size(gzip)](https://bundlephobia.com/package/@uiw/react-baidu-map-drawing-manager) | ![npm version](https://www.npmjs.com/package/@uiw/react-baidu-map-drawing-manager) ![Open in unpkg](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://www.npmjs.com/package/@uiw/react-baidu-map-types) | ![npm version](https://www.npmjs.com/package/@uiw/react-baidu-map-types) ![Open in unpkg](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-baidu-map-types/file/README.md)
@uiw/react-baidu-map-utils 鼠标绘制工具 | ![bundle size](https://bundlephobia.com/package/@uiw/react-baidu-map-utils) ![bundle size(gzip)](https://bundlephobia.com/package/@uiw/react-baidu-map-utils) | ![npm version](https://www.npmjs.com/package/@uiw/react-baidu-map-utils) ![Open in unpkg](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-baidu-map-utils/file/README.md)
@uiw/react-baidu-map-require-script 鼠标绘制工具 | ![bundle size](https://bundlephobia.com/package/@uiw/react-baidu-map-require-script) ![bundle size(gzip)](https://bundlephobia.com/package/@uiw/react-baidu-map-require-script) | ![npm version](https://www.npmjs.com/package/@uiw/react-baidu-map-require-script) ![Open in unpkg](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 start # 文档网站运行

cd packages/map
npm run watch # 监听编译输出 js 文件, .d.ts 类型文件
``

相关连接

- @uiw/react-amap 高德地图 React 组件
- 百度拾取坐标系统
- 百度地图官方 Demo 示例
- 百度地图 API v3.0

Contributors

As always, thanks to our amazing contributors!

Made with contributors.

License

Licensed under the MIT License.