React實戰-如何在ReactJs中呼叫Google、Baidu地圖

在這個網際網路時代，對地圖的運用已經成為Web、移動各類應用的必選項。國內外各大地圖應用提供商均有開放的Api供大家使用，當然更具使用的功能會提供付費版和免費版，如果僅僅只是小的應用或者練手，完全可以呼叫其免費版。呼叫的方式也很簡單，跟你呼叫其他的第三方庫類似。但是由於ReactJs的實現方式存在一些特殊性，其呼叫Google地圖（百度類似）也有細微差異（weixin: react-javascript）。

1.傳統網頁呼叫Google地圖方式

傳統網頁呼叫Google地圖的方式主要分以下基本：

a.註冊Google介面呼叫的

由於呼叫Google介面需要輸入Key，Key是Google賦予你的訪問許可權，各型別的Key不一樣，如果你採用ReactJS，你還是申請支援瀏覽器呼叫的Key。

b.引入Google的js庫

同所有的js庫一樣，需要引入Google的Js庫，不同的是路徑要加入key的值。

 <script type="text/javascript"      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA_qPoEzvCB8SYeHzpeI">

c.配置地圖引數，建立地圖

 function initmap() {

        var mapOptions = {

        center: { lat: 42.872, lng: 3.644},

        zoom: 3        

        };

        var map = new google.maps.Map(document.getElementById('example'),

            mapOptions);

      }

      google.maps.event.addDomListener(window, 'load', initmap);

2.ReactJs中如何呼叫Google的API

在ReactJs中呼叫Google步驟相同，不同的是在最終的呼叫時存在差異，你依然需要做以下三步：

a.註冊Google介面呼叫的key

b.引入Google的js庫

c.在ReactJs元件中呼叫

在ReactJs中你可以將地圖配置資訊以任何你認為合適的方式傳人googlemap的建構函式，不同的是:

l 我們不需要google.maps.event.addDomListener(window, 'load', initmap);

在ReactJs元件中，一般頁面原始初始化放在componentDidMount()函式中，暫且把初始化資料getInitialState中。如：

getInitialState(){

    return {

      mapconfig:{

      center: { lat: 42.872, lng: 3.644},

      zoom: 3        

      }

    }

  },

  componentDidMount(){

    new window.google.maps.Map(

      this.refs.map,       

      this.state.mapconfig);    

  },

l 我們也不採用document.getElementById('example')

上面的程式碼中你可以看到我們不要getElementById,而是採用refs。相應的頁面元素也應定義ref.

<div ref="map" style={{width: 400, height:400, }} />

3.特別注意的地方

從實現程式碼可以看出，我們並沒有發明創造，只是將原有實現方式變的符合React的實現機制。但是尤其要注意的是。我們在頁面引入js庫，在元件中呼叫時應採用window.google.maps,如果你少了window，則編譯無法通過，找不到google物件了，切記！

4.相關程式碼

原始碼位置：[email protected]:chenhuitian/react.git（googlemap-react）