如何在react脚手架中引入百度地图

第一步：

        进入https://lbsyun.baidu.com/ 注册自己的账号，并且实名认证

第二步：

进入 控制台->找到左侧应用管理下面的我的应用，点击右面的创建应用

创建好之后会得到一个 AK值，记住这个AK值

第三步：

         

 点击高亮处的 React-BMapGL ，进来之后点击最左侧的快速入门，找到右侧的

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

您的密钥就是刚才注册所得到的AK值，用那个值替换掉

然后复制这段代码，放到如下位置

react脚手架中的public->index.html  在这个页面中引入

 第四步：

        在你的脚手架项目中安装react组件库，如下

        npm install react-bmapgl --save

        等待安装完成之后，重新启动项目

第五步：

        

import React from 'react';
import ReactDOM from 'react-dom';
import {Map, Marker, NavigationControl, InfoWindow} from 'react-bmapgl';

class App extends React.Component {
    render() {
        return <Map center={{lng: 116.402544, lat: 39.928216}} zoom="11">
            <Marker position={{lng: 116.402544, lat: 39.928216}} />
            <NavigationControl /> 
            <InfoWindow position={{lng: 116.402544, lat: 39.928216}} text="内容" title="标题"/>
        </Map>
    }
}
ReactDOM.render(<App />, document.getElementById('container'));

如代码所示，在需要的组件或者页面中这样引入即可。

容易踩坑的地方：

        如果提示BMapGL 方法不存在，或者某个方法不存在，可以尝试这么写

        window.BMapGL.Point（116.402544， 39.928216） 

        因为方法是挂载到window 上的 react 上找不到这个方法是正常的 ，只需要引用的使用window来调用即可