如何将百度地图应用到React中

一、注册百度地图开发者账号 点击跳转

第一步：注册开发者账号
第二步：打开控制台

第三步：应用管理——我的应用——创建应用——选择应用名称和类型其余项默认即可，之后提交

创建好的应用是这样子的，应用创建好之后，可以先把AK值复制下来，方便下一步使用

二、在React中创建地图 官方文档

首先基本操作，在react项目中新建页面或者直接在App.js 中操作
接下来，演示异步加载地图，先在页面创建一个虚拟dom，用来当做显示地图的容器

render() {
        return (
            <div>
                <h1>地图示例</h1>
                <div id="allmap" style={{width:"100%",height:"300px"}}></div>
            </div>
        );
    }

然后创建一个异步加载百度地图的函数

    //异步加载百度地图
    loadScript() {  
        var script = document.createElement("script"); //创建虚拟dom
        script.type="text/javascript";
        //给虚拟dom添加src属性
        script.src = "//api.map.baidu.com/api?v=2.0&ak=把应用里的Ak值复制过来&callback=init";
        //把虚拟dom追加到body
        document.body.appendChild(script); 
    }

紧接着，在创建一个init函数，构建基本地图模型

    init = ()=> {  
        const BMap = window.BMap; //全局使用BMap
        this.map = new BMap.Map("allmap"); //创建地图示例，选择显示地图的容器，里面是id值
        var point = new BMap.Point(116.404, 39.915); //创建点坐标（经度，纬度）
        this.map.centerAndZoom(point,12); //初始化地图，设置中心点坐标和地图级别 
        this.map.enableScrollWheelZoom(); // 启用滚轮放大缩小
    }  

最后，在声明周期函数componentDidMount里把init变成全局方法，加载loadScript

    componentDidMount(){
        //把当前的init方法变成全局的init方法
        window.init = this.init;
        //异步加载
        this.loadScript();
    }

到了这一步，地图就能在你的页面上显示出来了，是不是很简单呢