React中使⽤百度地图API
耐克react和zoom今天我们来搞⼀搞如何在React中使⽤百度地图API好吧，最近忙的头⽪发⿇，感觉⾝体被掏空，所以很久都没来写博客了，但今天我⼀定要来⼀篇好吧
话不多说，我们直接开始好吧
特别注意：该React项⽬是⽤create react app 创建的（以下所有操作都在该基础上进⾏）
1.去百度地图登录
lbsyun.baidu/
2.获取密钥
  登录后在右上⾓的控制台⾥⾯申请（由于这个我早已申请过了，就不给⼤家演⽰了，⼤家照着它的提⽰⾛就可以了）
3.拿到密钥后，将百度API的script引⼊到public下的index.html⽂件
<script type="text/javascript" src="api.map.baidu/api?v=2.0&ak=你的密钥"></script>
4.去node_modules⽂件夹下react-script>config&fig.dev.js
然后我们打开该⽂件添加⼀句话
externals:{
'BMap':'BMap',
}
5.到此我们已经可以在组件中愉快的使⽤百度地图API了，下⾯给个组件使⽤的实例
import  React,{Component} from 'react';
import BMap  from 'BMap';
class AddressUi extends Component{
render() {
return(
<div className="address" id="address">
</div>
)
}
componentDidMount(){
var map = new BMap.Map("address"); // 创建Map实例
map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
map.setCurrentCity("北京"); // 设置地图显⽰的城市此项是必须设置的
}
}
export default AddressUi
对百度地图API的具体操作可参照官⽹
lbsyun.baidu/jsdemo.htm#i8_1
特别注意：注意在react中使⽤百度地图的API时会传⼊⼤写的变量名，这时要使⽤window.变量名，来表明它是全局变量，不然会报错

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。