React百度地图初始化

一 安装
npm install --save rc-bmap
安装后可以在package.json文件中看到

然后在public/index.html文件中引入

 <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=你的密钥"></script>
    

上面的密钥去百度地图开发者平台自己注册。
二 使用
在需要引入地图的模块引入，我是放到了maphost.jsx文件中

import React, { Component } from 'react';

var rBmap ={} // 全局Map实例
class maphost extends Component{
  
  componentDidMount(){//要在组件完成后初始化地图
    var BMap = window.BMap;//新键地图，用全局window
    var map = new BMap.Map("allmap",{ enableMapClick: false }); // 创建Map实例，这边我禁用了鼠标点击事件，可以不设置
    rBmap=map;//map实例赋值给全局的一个变量
    map.centerAndZoom("北京", 11);  // 设置中心点
    map.enableScrollWheelZoom(true);//设置可以根据鼠标滚动
  }
 
  render(){
  
    return (
        <div style={{height:'calc(100vh - 80px)'}}>
          <div  id='allmap' style={{ width:'100%',height:'100%' }}></div>
        </div>
    );
  }
  
  
}

export default maphost;

这样地图初始化工作就完成了