脚本宝典收集整理的这篇文章主要介绍了风尚云网学百度地图之react中引入百度地图,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
图片引于百度开放平台: 百度地图开放平台 | 百度地图API SDK | 地图开发
首先必须注册了百度地图开发者,有自己的ak,不知道怎么整的,去看上一篇博客
目录:
一:首先依旧是百度地图首页
二:找到开发文档中react开发:
三:开始使用安装地图
引入脚本
四:在react中写入地图:
百度地图开放平台 | 百度地图API SDK | 地图开发https://lbsyun.baidu.com/
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
等待安装完成之后,重新启动项目
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中引入百度地图所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。