# @uiw/react-baidu-map-require-script > Baidu Map require-script Components for React. Latest version **2.7.5** (published 2025-12-12) · MIT license · 0 weekly downloads ## Install ```sh npm install @uiw/react-baidu-map-require-script pnpm add @uiw/react-baidu-map-require-script yarn add @uiw/react-baidu-map-require-script bun add @uiw/react-baidu-map-require-script ``` ## Health **Score 60/100 (C)** — status: stable. Positive: has types; esm support; no vulnerabilities; has provenance. Warnings: low downloads. ## Facts | | | |---|---| | Version | 2.7.5 | | Published | 2025-12-12 | | First published | 2021-09-17 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 3 | | Unpacked size | 16 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Provenance | attested (GitHub Actions) | | GitHub stars | 241 | | Author | Kenny Wong | | Maintainers | wcjiang, uiwjs | | Keywords | react-baidu-map, baidu, baidu-map, baidu-map-require-script, require-script, map, react, bdmap, types, 百度, 地图, 百度地图 | ## Links - npm: https://www.npmjs.com/package/@uiw/react-baidu-map-require-script - Repository: https://github.com/uiwjs/react-baidu-map - Homepage: https://uiwjs.github.io/react-baidu-map/#/require-script - Issues: https://github.com/uiwjs/react-baidu-map/issues - Funding: https://jaywcjlove.github.io/#/sponsor - npm.io page: https://npm.io/package/@uiw/react-baidu-map-require-script ## Dependencies (3) - [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.18.0 - [@uiw/react-baidu-map-map](https://npm.io/package/@uiw/react-baidu-map-map.md) 2.7.5 - [@uiw/react-baidu-map-utils](https://npm.io/package/@uiw/react-baidu-map-utils.md) 2.7.5 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 2.7.5 (latest) — 2025-12-12 - 2.7.4 — 2025-07-23 - 2.7.3 — 2025-05-02 - 2.7.2 — 2024-06-24 - 2.7.1 — 2024-01-23 - 2.7.0 — 2023-12-01 - 2.6.3 — 2023-11-28 - 2.6.2 — 2023-08-24 - 2.6.1 — 2023-05-20 - 2.6.0 — 2023-03-31 - 2.5.5 — 2022-12-03 - 2.5.4 — 2022-11-10 - 2.5.3 — 2022-09-24 - 2.5.2 — 2022-08-25 - 2.5.1 — 2022-08-25 - … 16 more at https://npm.io/package/@uiw/react-baidu-map-require-script/versions ## README

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

RequireScript 加载第三方包 === [![Buy me a coffee](https://img.shields.io/badge/Buy%20me%20a%20coffee-048754?logo=buymeacoffee)](https://jaywcjlove.github.io/#/sponsor) [![npm version](https://img.shields.io/npm/v/@uiw/react-baidu-map-require-script.svg)](https://www.npmjs.com/package/@uiw/react-baidu-map-require-script) [![Downloads](https://img.shields.io/npm/dm/@uiw/react-baidu-map-require-script.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-baidu-map-require-script) 提供一个组件加载第三方包，也提供了一个 `requireScript` 方法加载第三方包。 ```jsx import { RequireScript, requireScript } from '@uiw/react-baidu-map'; // 或者单独安装使用 import RequireScript, { requireScript } from '@uiw/react-baidu-map-require-script'; ``` > ⚠️ 注意：预览当前页面需要刷新页面。 ### 基本用法下面实例来自高德官方： https://lbsyun.baidu.com/jsdemo.htm#gl_tool_1 ```jsx mdx:preview import React from 'react'; import { useRef } from 'react'; import { Map, APILoader, RequireScript } from '@uiw/react-baidu-map'; const Example = () => { const myDis = useRef(); const openHandle = () => { myDis.current.open(); } const closeHandle = () => { myDis.current.close(); } return ( <>

{({ map }) => { myDis.current = new BMapGLLib.DistanceTool(map); // 监听测距过程中的鼠标事件 myDis.current.addEventListener('drawend', function(e) { console.group("drawend"); console.log(e.points); console.log(e.overlays); console.log(e.distance); console.groupEnd(); }); myDis.current.addEventListener("addpoint", function(e) { console.group("addpoint"); console.log(e.point); console.log(e.pixel); console.log(e.index); console.log(e.distance); console.groupEnd(); }); myDis.current.addEventListener("removepolyline", function(e) { console.group("removepolyline"); console.log(e); console.groupEnd(); }); }} ); }; const Demo = () => (

); export default Demo; ``` ### Props | 参数 | 说明 | 类型 | 默认值 | | ----- | ----- | ----- | ----- | | src | 第三方包的 URL 地址 | `string` | - | ### 事件 | 参数 | 说明 | 类型 | 默认值 | | ----- | ----- | ----- | ----- | | onCompleted | 加载完成 | () => void; | - | | onFailed | 加载失败 | () => void; | - | --- _Source: https://npm.io/package/@uiw/react-baidu-map-require-script · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._