React-BMapGL

![npm version](https://www.npmjs.com/package/react-bmapgl)
![Package Quality](http://packagequality.com/#?package=react-bmapgl)
![Download](https://www.npmjs.com/package/react-bmapgl)
![License](https://github.com/huiyan-fe/react-bmapgl)

基于百度地图JavaScript GL版API封装的React组件库。如果想要使用旧版的2D地图的话，使用react-bmap。如果您对使用地图API完全陌生，建议使用这个库之前先了解百度地图JavaScript GL API，了解一些地图的基本概念，并申请开发者ak。

文档示例

官方地址：https://huiyan-fe.github.io/react-bmapgl/

开始使用

$3

首先，需要在你的index.html模板页面头部加载百度地图JavaScript API代码，密钥可去百度地图开放平台官网申请
``

html


然后，使用npm方式安装react组件库，然后通过es模块加载

bash
npm install react-bmapgl --save

$3

jsx static
import React from 'react';
import ReactDOM from 'react-dom';
import {Map, Marker, NavigationControl, InfoWindow} from 'react-bmapgl';
class App extends React.Component {
    render() {
        return 
            
             
            
        
    }
}
ReactDOM.render(, document.getElementById('container'));

`$3`


如果你在业务中需要操作

map对象，需要BMapGL.Map实例的话，可以通过组件实例的map

属性访问到它。

jsx static
 {this.map = ref.map}} />


如果你要开发

Map的子组件，想要在子组件中获得map对象，可以直接在包裹的子组件中调用this.props.map

即可。

jsx static
function App() {
    return 
        
    
}

function MapComponent(props) { console.log(props.map); }`

`异步加载与按需导入`

`$3`


通常，如果您的业务场景总需要使用到地图，或者需要创建多个地图实例，我们会建议您在

index.html

模板中加入JSAPI的scirpt标签，因为这种方式对后续开发没有任何限制。  
但是在某些业务场景下，可能并不一定会使用到地图，且用到的地图功能、组件也相对简单，我们也提供了

MapApiLoaderHOC

高阶组件，实现异步加载的方式。

jsx static
class App extends React.Component {
  render() {
    return (
              style={{ height: 450 }}
        center={new BMapGL.Point(116.404449, 39.914889)}
        zoom={12}
      />
    )
  }
}

export default MapApiLoaderHOC({ak: '您的密钥'})(App)`

`$3`


常用的导入方法会直接把整个包导入进来

jsx static
import { Map, Marker, MapvglView, MapvglLayer } from 'react-bmapgl'


如果希望引入的包体积小一点，所有组件都支持

lodash

风格进行按需导入

jsx static
import Map from 'react-bmapgl/dist/Map'
import Marker from 'react-bmapgl/dist/Overlay/Marker'



本地开发
$3

React-BMapGL只是利用了React组件的生命周期，来调用对应的百度地图JavaScript API的方法，比如在

componentDidMount的时候在地图上添加覆盖物，componentWillUnmount的时候移除覆盖物，componentDidUpdate的时候更新覆盖物，React对应的render

渲染函数模块返回的是null。所以这里面地图相关的DOM并不是react渲染的，真正创建地图之类的还是使用百度地图JavaScript API，React-BMapGL只是利用了React组件的写法来封装百度地图JavaScript API，使我们在使用React的时候能更方便的使用百度地图JavaScript API。
$3

本项目开发使用

Typescript编写，声明文件为@types/bmapgl

，如果需要修改，需要给DefinitelyTyped提PR。如果需要安装声明文件依赖，执行安装命令

bash
npm install @types/bmapgl -D

$3

bash
npm install         # 安装依赖
npm start           # 开始运行文档网站
npm run build:doc   # 文档网站构建编译
npm run build       # 组件库编译，输出 js 和 .d.ts 文件

npm publish # 发布新npm包`

`$3`


修改

package.json版本号后，直接执行npm publish`

许可证

MIT LICENSE

React-BMapGL

文档示例

官方地址：https://huiyan-fe.github.io/react-bmapgl/

开始使用

$3

首先，需要在你的index.html模板页面头部加载百度地图JavaScript API代码，密钥可去百度地图开放平台官网申请
``

html


然后，使用npm方式安装react组件库，然后通过es模块加载

bash
npm install react-bmapgl --save

$3

jsx static
import React from 'react';
import ReactDOM from 'react-dom';
import {Map, Marker, NavigationControl, InfoWindow} from 'react-bmapgl';
class App extends React.Component {
    render() {
        return 
            
             
            
        
    }
}
ReactDOM.render(, document.getElementById('container'));

`$3`


如果你在业务中需要操作

map对象，需要BMapGL.Map实例的话，可以通过组件实例的map

属性访问到它。

jsx static
 {this.map = ref.map}} />


如果你要开发

Map的子组件，想要在子组件中获得map对象，可以直接在包裹的子组件中调用this.props.map

即可。

jsx static
function App() {
    return 
        
    
}

function MapComponent(props) { console.log(props.map); }`

`异步加载与按需导入`

`$3`


通常，如果您的业务场景总需要使用到地图，或者需要创建多个地图实例，我们会建议您在

index.html

模板中加入JSAPI的scirpt标签，因为这种方式对后续开发没有任何限制。  
但是在某些业务场景下，可能并不一定会使用到地图，且用到的地图功能、组件也相对简单，我们也提供了

MapApiLoaderHOC

高阶组件，实现异步加载的方式。

jsx static
class App extends React.Component {
  render() {
    return (
              style={{ height: 450 }}
        center={new BMapGL.Point(116.404449, 39.914889)}
        zoom={12}
      />
    )
  }
}

export default MapApiLoaderHOC({ak: '您的密钥'})(App)`

`$3`


常用的导入方法会直接把整个包导入进来

jsx static
import { Map, Marker, MapvglView, MapvglLayer } from 'react-bmapgl'


如果希望引入的包体积小一点，所有组件都支持

lodash

风格进行按需导入

jsx static
import Map from 'react-bmapgl/dist/Map'
import Marker from 'react-bmapgl/dist/Overlay/Marker'



本地开发
$3

React-BMapGL只是利用了React组件的生命周期，来调用对应的百度地图JavaScript API的方法，比如在

componentDidMount的时候在地图上添加覆盖物，componentWillUnmount的时候移除覆盖物，componentDidUpdate的时候更新覆盖物，React对应的render

渲染函数模块返回的是null。所以这里面地图相关的DOM并不是react渲染的，真正创建地图之类的还是使用百度地图JavaScript API，React-BMapGL只是利用了React组件的写法来封装百度地图JavaScript API，使我们在使用React的时候能更方便的使用百度地图JavaScript API。
$3

本项目开发使用

Typescript编写，声明文件为@types/bmapgl

，如果需要修改，需要给DefinitelyTyped提PR。如果需要安装声明文件依赖，执行安装命令

bash
npm install @types/bmapgl -D

$3

bash
npm install         # 安装依赖
npm start           # 开始运行文档网站
npm run build:doc   # 文档网站构建编译
npm run build       # 组件库编译，输出 js 和 .d.ts 文件

npm publish # 发布新npm包`

`$3`


修改

package.json版本号后，直接执行npm publish`

许可证

MIT LICENSE