React实战-如何在ReactJs中调用Google、Baidu地图

React实战-如何在ReactJs中调用Google、Baidu地图

在这个互联网时代，对地图的运用已经成为Web、移动各类应用的必选项。国内外各大地图应用提供商均有开放的Api供大家使用，当然更具使用的功能会提供付费版和免费版，如果仅仅只是小的应用或者练手，完全可以调用其免费版。调用的方式也很简单，跟你调用其他的第三方库类似。但是由于ReactJs的实现方式存在一些特殊性，其调用Google地图（百度类似）也有细微差异（weixin: react-javascript）。

1.传统网页调用Google地图方式

传统网页调用Google地图的方式主要分以下基本：

a.注册Google接口调用的key

由于调用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.相关代码

源码位置：[e-mail]:chenhuitian/react.git（googlemap-react）