基于 React 封装的百度地图组件，支持 React Hook，帮助你轻松的接入地图到 React 项目中。.zip

<p align="center"> <a href="https://github.com/uiwjs/react-baidu-map"> <img src="https://uiwjs.github.io/react-baidu-map/logo.svg" height="80px" alt="百度地图 LOGO" /> </a> </p> <h3 align="center">百度地图 React 组件</h3> <p align="center"> <a href="https://jaywcjlove.github.io/#/sponsor" target="__blank"> <img alt="Buy me a coffee" src="https://img.shields.io/badge/Buy%20me%20a%20coffee-048754?logo=buymeacoffee"> </a> <a href="https://github.com/uiwjs/react-baidu-map/actions"> <img src="https://github.com/uiwjs/react-baidu-map/actions/workflows/ci.yml/badge.svg" alt="Build & Deploy"> </a> <a href="https://www.npmjs.com/package/@uiw/react-baidu-map"> <img src="https://img.shields.io/npm/dm/@uiw/react-baidu-map.svg?style=flat" alt="Downloads"> </a> <a href="https://uiwjs.github.io/react-baidu-map/coverage/lcov-report/"> <img src="https://uiwjs.github.io/react-baidu-map/badges.svg" alt="Coverage Status"> </a> <a href="https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-baidu-map/file/README.md"> <img src="https://img.shields.io/badge/Open%20in-unpkg-blue" alt="Open in unpkg"> </a> <a href="https://www.npmjs.com/package/@uiw/react-baidu-map"> <img src="https://img.shields.io/npm/v/@uiw/react-baidu-map.svg" alt="npm version"> </a> <a href="https://gitee.com/uiw/react-baidu-map"> <img src="https://jaywcjlove.github.io/sb/ico/gitee.svg" alt="Gitee Repo"> </a> </p> 这是一个基于 React 封装的百度地图组件，帮助你轻松的接入地图到 React 项目中。除了必须引用的 APILoader/Map 组件外，我们目前提供了最常用的地图组件，能满足大部分简单的业务场景；如果你有更复杂的需求，或者觉得默认提供的组件功能不够，可以使用 Map 组件返回的地图实例，完全自定义一个地图组件，然后根据百度地图原生 API 做百度地图允许你做的一切事情。 <!--rehype:ignore:start-->  <!--rehype:ignore:end--> 文档实例预览: [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) 组件库 <!--rehype:style=border-left: 8px solid #ffe564;background-color: #ffe56440;padding: 12px 16px;--> <!--rehype--> ```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 = () => ( <div style={{ width: '100%', height: '300px', overflow: 'auto' }}> <APILoader akay="eYpCTECSntZmw0WyoQ7zFpCRR9cpgHFG"> <Map center="杭州"/> <Map center="上海"> {({ BMap, map, container }) => { return; }} </Map> </APILoader> </div> ); export default Demo; ``` ## 容器组件 Package | Bundle size(gzip) | Version/unpkg ----- | ----- | ---- [`@uiw/react-baidu-map`](https://uiwjs.github.io/react-baidu-map/) **懒人包** <br />集成所有包，不必安装其它包 | [](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) [![Open in unpkg](https://img