前期准备:在百度地图开发文档中申请秘钥,申请流程按照网上的攻略走很简单的几个步骤 (如果项目紧急也可以私信找我要我的秘钥)
官网http://lbsyun.baidu.com/
index.html文件
//引入百度地图
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的秘钥">
//v2.0版本的引用方式:src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"
//Imejyag6D5IPg4lOfu0LiDUWBGh2SNmc
</script>
demo.js(你需要用到百度地图的文件中)
componentDidMount(){
this.renderMap()
}
//初始化地图的方法
renderMap = () =>{
this.map=new window.BMap.Map("orderDetailMap"); //初始化地图,这个id和下面的id相对应,之所以将初始化的地图放到this对象上,是方便其他方法调用map对象
this.map.centerAndZoom('北京市', 10);
}
render(){
return(
<div>
<div id="orderDetailMap">最好地图自己设置高度,否则地图容易不显示出来</div>
<div>
)
}
原理解释:react是模块化开发,如果不是以import方式引入进来的话,会报错为BMap is undefined,但是放在window对象上是可以取得到的,刷新一下页面,在控制台中输入BMap是能够获取到,输入window发现BMap对象已经挂载到上面