[JavaScript知识库]风尚云网学百度地图之react中引入百度地图

??图片引于百度开放平台：?百度地图开放平台 | 百度地图API SDK | 地图开发

首先必须注册了百度地图开发者，有自己的ak，不知道怎么整的，去看上一篇博客

目录：

目录：

一：首先依旧是百度地图首页

二：找到开发文档中react开发：

?三：开始使用安装地图

引入脚本

四：在react中写入地图：

一：首先依旧是百度地图首页

百度地图开放平台 | 百度地图API SDK | 地图开发https://lbsyun.baidu.com/

二：找到开发文档中react开发：

React-BMapGL文档https://lbsyun.baidu.com/solutions/reactBmapDoc

?三：开始使用安装地图

引入脚本

首先，需要在你的public/index.html模板页面头部加载百度地图JavaScript API代码，

?

密钥可去百度地图开放平台官网申请

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

然后，使用npm方式安装react组件库，然后通过es模块加载

npm install react-bmapgl --save

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

四：在react中写入地图：

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'));

一切准备就绪，您就创建了一个属于自己的react百度地图项目~

地图控件及工具使用请参考：React-BMapGL文档

?