一 安装
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;
这样地图初始化工作就完成了