@uiw/react-baidu-map NPM

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

npm.io

文档实例预览: 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

使用

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` 懒人包集成所有包，不必安装其它包
`@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@7

npm install # 安装依赖
npm install --workspaces

npm run build # 编译输出组件 js 文件, .d.ts 类型文件
npm run watch # 监听编译输出 js 文件, .d.ts 类型文件
npm run start # 文档网站运行