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

百度地图开放平台 | 百度地图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文档

风尚云网学百度地图之react中引入百度地图相关推荐

在react中使用百度地图
在react中使用百度地图在react中使用百度地图有三种方式 1:首先使用window保存BMap 1): 在创建好的react项目中的public目录下的index.html中引入<scr ...
vue+element中引入百度地图
❤️❤️❤️ Topology可视化绘图引擎 ❤️❤️❤️ 前言: 您好,我是csdn-尔嵘,如果您需要雨伞,可以去TaoBao搜:华,诚,荣,邦,百,货谢谢您的支持! 1.首先你需要下载npm模 ...
浏览器中引入百度地图，并带有导航功能
在浏览器中引入百度地图,并带有导航功能 1.去百度地图API官网申请一个密钥,然后引入百度地图API <script type="text/ ...
vue中引入高德地图
❤️❤️❤️ Topology可视化绘图引擎 ❤️❤️❤️ 总的来说,vue组件中使用高德地图的方式有两种,一种是vue-amap :一套专门用于vue的高德地图插件:另外一种是原生的高德地图. 方式 ...
Echarts中引入中国地图
摘要:最近公司要求开发大屏大数据展示界面,其中有个需求是迁徙图,以下是自己的相关总结,如有些的不好的地方请大家多多指教,我会虚心学习并修改不足的地方. 思考:1.迁徙图实现的第一步是引入中国地图,那如 ...
[react] 怎么在React中引入其它的UI库，例如Bootstrap
[react] 怎么在React中引入其它的UI库,例如Bootstrap react-bootstrap是一个非常受欢迎的针对react封装过的bootstrap,它本身不包含css,所以也是需要使 ...
在vue中引入高德地图
既然要用到高德地图首先要申请成为高德地图开发者,并申请使用高德地图的key这两点在这篇文章就不过多赘述,有需要的小伙伴可以查查资料,或者去高德地图api官网都有很详细的介绍.高德地图官网简单提一下申 ...
如何在React中引入阿里图标库的图标
一.周所周知在 Antd Design 中也有一些图标,但是要找到自己想要的图标不是很方便,需要一个一个的找.而且提供的图标数量也不是很多! 而阿里图标库可以通过搜索找到自己想要的图标,图标的数量和 ...
vue中引入高德地图Loca数据可视化
目录引言: 关键词: 正文: 一.如何安装或者引入: 二.如何引入: 三.如何使用: 四.完整代码: 五.效果图参考: 引言: 前面我的文章介绍了vue中引入高德地图实例的,详情可以去参考,由于需 ...
关于在echarts/ngx-echarts中引入省份地图简易实现
由于不可抗力的因素,echarts给了我一个亲切的警告. 于是,从没有认真看过echarts地图实现的我,心态炸了. 那么,如何来解决这个问题呢? 按照我超级清丽的画风和长时间的代码编辑习惯,那一定是 ...

风尚云网学百度地图之react中引入百度地图

目录：