用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開源，隨時供你們參考。