用GeoChart和Firebase开发一个去过哪儿应用

做为一个纯前端工程师，你是否也曾想过开发一个属于你本身的应用？在这个应用里，没有后端，没有API，你再也不须要可怜巴巴地等待后端工程师给你设置数据库，给你打通第三方登陆接口，而你本身一我的把全部这些事情所有搞定。那么今天咱们来一步一步创建这个工程，这个只属于你一我的开发，但能提供给无数人服务的工程。

GeoChart

GeoChart是属于Google Charts一部分的地理图表，Google Charts提供了各类各样的柱状图、饼状图、折线图等等图形，咱们目前只关注GeoChart这部分。

GoeChart的官方参考资料见 这里。

在Google Charts里同时还提供了一种图表叫Maps，它和GeoChart是不一样的。Maps提供的是实体地图，GeoCharts提供的是矢量地图。由于咱们在这里要作点击效果，因此须要用GeoChart而不是Maps。

用GeoChart画出一张地图来很是简单，只须要寥寥几行代码就够了：

// 设定初始化数据
var userDataObj = {
  visitedCountries: [['Country', 'Popularity']]
};
// 设定选项
var optionsWorld = {};
// 页面启动时执行如下函数
google.charts.setOnLoadCallback(drawRegionsMap);

function drawRegionsMap() {
  // 指定要在哪里画地图
  var chartWorld = new google.visualization.GeoChart(document.getElementById('world'));
  // 画地图
  chartWorld.draw(google.visualization.arrayToDataTable(userDataObj.visitedCountries), optionsWorld);
}

而后，你就获得了一张世界地图：

可是若是只是简单地按照以上代码，是产生不出来图片中这些绿色方块的。那么如何加上这些绿色方块呢？下一步，咱们为代码增长鼠标点击的交互：

google.visualization.events.addListener(chartWorld, 'regionClick', function (e) {
  selectHandler(e, 'world');
});

当鼠标点击某一区域时，则调用selectHandler方法：

function selectHandler(e, mapType) {
  // 给点击区域增长一个数值
  userDataObj.visitedCountries.push([e.region, 200]);
  // 从新绘制地图
  drawRegionsMap();
}

在这里，给每个你点击的区域设定一个数据，而后调用以上函数从新绘制地图，就能够有这些绿色区域了。

Firebase

如今只是简单地响应了用户的点击事件，如何保存这些数据呢？最简单的方法，你能够把这些数据保存在LocalStorage里面，但这样的弊端是若是换一台电脑，那么之前保存的数据就都丢失了，因此你须要保存在云端。Firebase提供了免费的服务供你使用，实际就是一个免费的MongoDB数据库。咱们来看一下如何把本身的数据保存在Firebase里：

Firebase官方参考资料见 这里。

firebase.database().ref('users/' + userDataObj.uid).set(userDataObj);

这里的uid是Google为每个访问你网站的用户提供的惟一编号，这样你就能够不仅是为你本身提供服务，而且能够给任何访问你网站的人服务了，咱们开发公开网站的目的不就是为此吗？

接下来，咱们来看一下如何获取这个uid：

firebase.auth().onAuthStateChanged(function(user) {
  userDataObj.uid = user.uid;
});

只要登陆成功，就能够拿到这个uid了。可是要如何登陆呢？别急，Firebase提供了全套服务：

var uiConfig = {
  signInSuccessUrl: 'index.html', // 登陆成功以后跳转到index.html页面
  signInOptions: [
    firebase.auth.GoogleAuthProvider.PROVIDER_ID, // 以Google帐户登陆，也能够以手机号或邮箱登陆
  ],
};

var ui = new firebaseui.auth.AuthUI(firebase.auth()); // 建立登陆区域
ui.start('#firebaseui-auth-container', uiConfig); // 把登陆区域附加到页面指定位置

用户登陆成功以后，须要从Firebase获取他/她以前保存的数据：

var userData = firebase.database().ref('users/' + user.uid);
userData.on('value', function(snapshot) {
  var data = snapshot.val();
  userDataObj.visitedCountries = data.visitedCountries;
});

而后你就获得了一个可存可取的去哪儿应用能够给任何人使用了。而且你还能够制做中国地图哦，只要在建立地图时设定如下选项就行了：

var optionsChina = {
  region: 'CN',
  resolution: 'provinces',
};

画好以后就是这样：

这里还有一个小插曲：因为 Google公司（以及美国的其它不少高科技公司都是如此）的不少关键技术岗位都被印度人把持，致使不少本该理想的设计出现误差。在 GeoChart的官方文档中明确写着若是咱们在上面的选项中添加 domain这一个选项的话，它是能够按照 domain中指定的所在国的政治主张把地图中的争议地区标为所在国领土的。举例来讲，若是咱们把 domain设为 CN，则藏南地区的领土在这张地图中应该是不存在任何争议属于中国的。可是很遗憾，测试以后的结果并不是如此，即便加了 domain: 'CN'的选项，在这张地图里藏南地区依旧被标为争议领土。 可是，若是咱们把domain设为IN的话，则藏南地区变成了印度的领土！咱们理解 domain这一选项的设计是为了解决不一样国家以前的争议，可是印度人在这个纯技术问题上玩弄这样的花招，实在是使人气愤！但愿 Google公司的中国工程师尽快解决此问题。

代码

以上简单描述了绘制地图、添加交互、用户登陆等过程，实际代码还有不少断定，感兴趣的同窗能够来个人博客《日新亭》体验效果，全部代码都在Github开源，随时供你们参考。