Movatterモバイル変換

uiwjs/react-baidu-mapPublic

NotificationsYou must be signed in to change notification settings
Fork22
Star238

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

uiwjs.github.io/react-baidu-map

License

MIT license

238 stars 22 forks Branches Tags Activity

Star

Notifications

You must be signed in to change notification settings

Branches Tags

Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 528 Commits
.github		.github
.husky		.husky
packages		packages
website		website
.gitignore		.gitignore
.prettierignore		.prettierignore
.prettierrc		.prettierrc
LICENSE		LICENSE
README.md		README.md
lerna.json		lerna.json
package.json		package.json
renovate.json		renovate.json
tsconfig.json		tsconfig.json

Repository files navigation

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

百度地图 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 组件库

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

使用

importReactfrom'react';import{Map,APILoader}from'@uiw/react-baidu-map';constDemo=()=>(<divstyle={{width:'100%',height:'300px',overflow:'auto'}}><APILoaderakay="eYpCTECSntZmw0WyoQ7zFpCRR9cpgHFG"><Mapcenter="杭州"/><Mapcenter="上海">{({ BMap, map, container})=>{return;}}</Map></APILoader></div>);exportdefaultDemo;

容器组件

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

控件组件

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

覆盖物

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

其它

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

开发

npm install -g npm@7npm install# 安装依赖npm install --workspacesnpm run build# 编译输出组件 js 文件, .d.ts 类型文件npm run start# 文档网站运行cd packages/mapnpm run watch# 监听编译输出 js 文件, .d.ts 类型文件