Bulid Web application use Google Maps
此文章根据Tutorialzine教程实践，具体代码可参考Github
React.js
自正式发布以来，一直都是热门话题就不多讨论了，官方教程可参考React中文社区或者加入由@题叶推广的React-China社区
React组件结构设计
- App : 最主要的部分，它包含用于可以由像搜索的用户执行的操作的方法，增加一个位置到收藏夹等等。的其它组分内嵌套
- CurrentLocation : 呈现在地图中的当前被访问的地址。地址可以通过点击星标可以添加或删除收藏夹
- LocationList : 展示用户Start的LocationItem
- LocationItem : 是一个单独的位置。当它被点击，其相应的地址被搜索到并在地图上突出显示
- Map : 集成了GMaps实现库，并呈现从谷歌地图的地图
- Search : 是缠绕在搜索表单的成分。当它被提交，搜索位置被触发
具体代码实现
App.js
var React = require('react');
var Search = require('./Search');
var Map = require('./Map');
var CurrentLocation = require('./CurrentLocation');
var LocationList = require('./LocationList');
var App = React.createClass({
getInitialState(){
// 使用localStorage（本地存储）存储喜爱的位置
var favorites = [];
if(localStorage.favorites){
favorites = JSON.parse(localStorage.favorites);
}
// 默认初始化地址是巴黎
return {
favorites: favorites,
currentAddress: 'Paris, France',
mapCoordinates: {
lat: 48.856614,
lng: 2.3522219
}
};
},
toggleFavorite(address){
if(this.isAddressInFavorites(address)){
this.removeFromFavorites(address);
}
else{
this.addToFavorites(address);
}
},
addToFavorites(address){
var favorites = this.state.favorites;
favorites.push({
address: address,
timestamp: Date.now()
});
this.setState({
favorites: favorites
});
localStorage.favorites = JSON.stringify(favorites);
},
removeFromFavorites(address){
var favorites = this.state.favorites;
var index = -1;
for(var i = 0; i < favorites.length; i++){
if(favorites[i].address == address){
index = i;
break;
}
}
// 如果用户点击取消start，从喜欢的arra中删除它
if(index !== -1){
favorites.splice(index, 1);
this.setState({
favorites: favorites
});
localStorage.favorites = JSON.stringify(favorites);
}
},
isAddressInFavorites(address){
var favorites = this.state.favorites;
for(var i = 0; i < favorites.length; i++){
if(favorites[i].address == address){
return true;
}
}
return false;
},
searchForAddress(address){
var self = this;
// 这里是调用Google Maps API的部分，将会使用到Map.js的GMaps' geocode functionality
GMaps.geocode({
address: address,
callback: function(results, status) {
if (status !== 'OK') return;
var latlng = results[0].geometry.location;
self.setState({
currentAddress: results[0].formatted_address,
mapCoordinates: {
lat: latlng.lat(),
lng: latlng.lng()
}
});
}
});
},
render(){
return (
Your Google Maps Locations
CurrentLocation.js
var React = require('react');
var CurrentLocation = React.createClass({
toggleFavorite(){
this.props.onFavoriteToggle(this.props.address);
},
render(){
var starClassName = "glyphicon glyphicon-star-empty";
if(this.props.favorite){
starClassName = "glyphicon glyphicon-star";
}
return (
{this.props.address}
);
}
});
module.exports = CurrentLocation;
LocationList.js
var React = require('react');
var LocationItem = require('./LocationItem');
var LocationList = React.createClass({
render(){
var self = this;
var locations = this.props.locations.map(function(l){
var active = self.props.activeLocationAddress == l.address;
// 在这个function中将会回调一个onClick
// LocationList 显示每个 LocationItem.
return LocationItem.js
var React = require('react');
var LocationItem = require('./LocationItem');
var moment = require('moment');
var LocationItem = React.createClass({
handleClick(){
this.props.onClick(this.props.address);
},
render(){
var cn = "list-group-item";
if(this.props.active){
cn += " active-location";
}
return (
{this.props.address}
{ moment(this.props.timestamp).fromNow() }
)
}
});
module.exports = LocationItem;
Map.js
var React = require('react');
var Map = React.createClass({
componentDidMount(){
this.componentDidUpdate();
},
componentDidUpdate(){
if(this.lastLat == this.props.lat && this.lastLng == this.props.lng){
return;
}
this.lastLat = this.props.lat;
this.lastLng = this.props.lng
var map = new GMaps({
el: '#map',
lat: this.props.lat,
lng: this.props.lng
});
// Adding a marker to the location we are showing
map.addMarker({
lat: this.props.lat,
lng: this.props.lng
});
},
render(){
return (
Loading...
);
}
});
module.exports = Map;
Search.js
var React = require('react');
var Search = React.createClass({
getInitialState() {
return { value: '' };
},
handleChange(event) {
this.setState({value: event.target.value});
},
handleSubmit(event){
event.preventDefault();
// 当提交表单时，调用传递到组件的onSearch回调
this.props.onSearch(this.state.value);
// Unfocus文本输入字段
this.getDOMNode().querySelector('input').blur();
},
render() {
return (
);
}
});
module.exports = Search;
main.js
var React = require('react');
var App = require('./components/App');
React.render(
总结
从一个初学者的佳都来看，使用React最重要的就是Compoent结构设计，还有就是被调用组件与组件之间的props,state和回调事件函数，附一张结构图帮助理解结构设计