React中使用百度地圖API

今天我們來搞一搞如何在React中使用百度地圖API好吧，最近忙的頭皮發麻，感覺身體被掏空，所以很久都沒來寫博客了，但今天我一定要來一篇好吧

話不多說，我們直接開始好吧

特別注意：該React項目是用create react app 創建的（以下所有操作都在該基礎上進行）

1.去百度地圖登錄

http://lbsyun.baidu.com/

2.獲取密鑰

　　登錄后在右上角的控制台里面申請（由於這個我早已申請過了，就不給大家演示了，大家照着它的提示走就可以了）

3.拿到密鑰后，將百度API的script引入到public下的index.html文件

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的密鑰"></script>

4.去node_modules文件夾下找react-script>config>webpack.config.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.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地圖,設置中心點坐標和地圖級別
        map.addControl(new BMap.MapTypeControl()); //添加地圖類型控件
        map.setCurrentCity("北京"); // 設置地圖顯示的城市 此項是必須設置的
        map.enableScrollWheelZoom();
}
}
export default AddressUi

對百度地圖API的具體操作可參照官網

http://lbsyun.baidu.com/jsdemo.htm#i8_1

 

特別注意：注意在react中使用百度地圖的API時會傳入大寫的變量名，這時要使用window.變量名，來表明它是全局變量，不然會報錯