react-bmaps v1.2.1

react-bmaps

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

最近更新

react-bmaps 初版 1.0.0（2019-08-23）

扩展组件

如果 react-bmaps 中已有的组件不能满足你的业务需求，你可以使用自己写的地图组件。

 import { useMap } from 'react-bmaps/map-context';
 const map = useMap();

在你的组件中，通过map参数访问到创建好的百度地图实例，你可以根据百度地图API做你做的一切事情。实际上，react-bmaps 中的其他组件就是这么做的。

如何在项目中接入 react-bmaps;

安装

npm install --save react-bmaps

npm 用法

<div id="app"></div>

#app {
  width: 600px;
  height: 400px;
}

import React from 'react';
import ReactDOM from 'react-dom';
import { Map } from 'react-bmaps';

ReactDOM.render(
  <Map mapKey={YOUR_AMAP_KEY} />,
  document.querySelector('#app')
)

mapKey 说明见下文

也可以手工引入你需要的组件：

import Map from 'react-bmaps/lib/map';
import Marker from 'react-bmaps/lib/marker';
// ... your other code

关于 Key

在上面的例子中需要给 Map 组件传入 mapKey 属性，这个是百度图给开发者分配的开发者 Key；你可以在百度开放平台申请你自己的 Key。

在 react-bmaps 中 Key 的传入方式有两种:

• 给 Map 组件传入 mapKey 属性（因为 React 框架本身对 key 属性有其他作用，所以不能用 key，所以我们用 mapKey），这样的缺点是如果多个地方使用就要每次都要传入；
• 你也可以定义一个纯组件,把 Map 组件的 mapKey 属性写好后返回新组件。

组件的使用请移步组件文档。