一:首先依旧是百度地图首页
百度地图开放平台 | 百度地图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