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.變量名，來代表它是全局變量，否則會報錯