2021-06-25

React中使用百度地图

1.注册百度账号，申请ak。

点击创建应用可以看见ak
2.引入百度地图

<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=您的密钥">

这里的密钥就是上面申请到的ak。替换即可
这个放在public下的index.html文件中
公共样式index.css中添加如下代码

html,body,#root,.App{
  height: 100%;
}
body{
	margin: 0;
    padding: 0;
    }

3.引入地图页面

export default class Map extends React.Component{
    componentDidMount(){
    	//创建地图实例
        const map=new window.BMapGL.Map("container")
        //设置中心点坐标
        const point=new window.BMapGL.Point(116.404,39.915)
        // 初始化地图
        map.centerAndZoom(point,15)
    }
    render(){
        return(
                <div id="container">
                    地图
                </div>
        )
    }
}

要给地图容器的样式添加

#container{
	height:100%;
}

至此，React中引入百度地图已完成。