用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 開源，隨時供大家參考。
來自：https://segmentfault.com/a/1190000012464634