【react】React怎麼引用百度地圖

前期準備：在百度地圖開發文檔中申請祕鑰，申請流程按照網上的攻略走很簡單的幾個步驟 (如果項目緊急也可以私信找我要我的祕鑰)

官網http://lbsyun.baidu.com/

index.html文件

//引入百度地圖
  <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的祕鑰">
    //v2.0版本的引用方式：src="http://api.map.baidu.com/api?v=2.0&ak=您的密鑰"
    //Imejyag6D5IPg4lOfu0LiDUWBGh2SNmc
  </script>

demo.js(你需要用到百度地圖的文件中)

componentDidMount(){
    this.renderMap()
}
//初始化地圖的方法
 renderMap = () =>{
        this.map=new window.BMap.Map("orderDetailMap"); //初始化地圖，這個id和下面的id相對應，之所以將初始化的地圖放到this對象上，是方便其他方法調用map對象
        this.map.centerAndZoom('北京市', 10);
    }
  render(){
    return(
            <div>
                <div id="orderDetailMap">最好地圖自己設置高度，否則地圖容易不顯示出來</div>
            <div>
          )
    }

原理解釋：react是模塊化開發，如果不是以import方式引入進來的話，會報錯爲BMap is undefined，但是放在window對象上是可以取得到的，刷新一下頁面，在控制檯中輸入BMap是能夠獲取到，輸入window發現BMap對象已經掛載到上面