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文档
————————————————
版权声明：本文为CSDN博主「风尚云网」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/zsx0806/article/details/122461914