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的值。
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.
3.特别注意的地方
从实现代码可以看出,我们并没有发明创造,只是将原有实现方式变的符合React的实现机制。但是尤其要注意的是。我们在页面引入js库,在组件中调用时应采用window.google.maps,如果你少了window,则编译无法通过,找不到google对象了,切记!
4.相关代码
源码位置:git@github.com:chenhuitian/react.git(googlemap-react)