生活地圖 贊助 Donate 授權聲明 製作說明

LiveMaps!

一起在地圖上聊天吧!

LiveMaps 是一個即時地圖聊天室,讓你在世界上任何位置都可以發出自己的感想動態。每個人都可以在地圖分享著她在世界各地、城市角落的心情寫照,網站藉由 Google 所提供的 FirebaseRealtime Database 以及 Google Maps JavaScript API 免費服務實作。

聊天地圖也是一個純前端技術的網站,仰賴 Firebase 的 Realtime 的特性,並且用於 Google Maps 上,讓使用者的定位可以即時分享,同時間也可以發佈動態;現階段只是初樣的 Prototype,之後會加入 個人聊天室上傳照片Mobile App 等功能!

作品分享

取之於網路 • 分享於網路

功能介紹

FEATURE • LIVE DEMO

基本的 Google Maps JavaScript API 的應用這邊就不多介紹了,這次的練習主要著重在 Firebase 的應用,藉由 Hosting 來取得 Https 的協定,然後在建立起專案,並且利用 Realtime Database 來實作即時性的功能。

Firebase 的 Hosting 可以將自己的 Domain 用 CNAME、A 記錄指向過來,使得專案擁有自己客製化的 Domain/Sub Domain 並且是 Https 的協定,而 Hosting 功能在 Firebase 的操作上並不會太困難,只要依照其所顯示的步驟驗證完網域所有權後即可完成。Realtime Database 是項 Firebase 儲存資料的服務,他是以 JSON 的方式,用 key-value 方式儲存,用過 NoSQL 的朋友或許會比較適應這樣的 Database;因為儲存格式是 JSON 的關係,所以在一開始的設計就不能以關聯式資料庫的思維角度下去設計囉。

CRUD 的基本功能撰寫這邊也不做介紹,基本上官網都有範例以及說明囉,其中包含了 iOS、Android、JavaScript 的支援,所以更可以製作成 Mobile App,而下一階段我也將考量使用 iOS 來實作一次 LiveMaps。官方資源也不僅於 Sample,在官方 GitHub 也可以看到多樣的 Library,其中常見的 firebaseui-webGEO.. 等,服務都是由官方維護的,所以在家接功能上會更加方便。

以網頁版來說,登入系統可以由 firebaseui-web 來串接,在地圖上更可以用 geofire-js 來實作,geofire 就有豐富的經緯度範圍運算,可以快速的撈出範圍內的點,不過對於 Database 的 JSON 格式架構就要符合其規範,第一版的 LiveMaps 就是使用 geofire 實作,但是因為功能需求,所以暫時先捨棄;而 firebaseui 提供了各種不同的 OAuth 登入,可以配合 Authentication 製作登入系統,不過在第二版製作時也暫時拿掉,主要是因為想加快登入時間問題,所以暫時只使用 Facebook 的 SDK 實作 OAuth 登入。

網頁的定位方式,是採用 navigator.geolocationwatchPosition 取得使用者瀏覽器裝置位置,因為 Firebase 提供了 Https 的服務,故在 Chrome 瀏覽器上就可以取得使用者位置,而且使用了 watchPosition 並且搭配使用 enableHighAccuracy,所以取的的位置會較為精準,但也可能會有誤差值,故使用上可能會有使用者發生位置不正確的狀況,待下一版本解決。

私訊通知是存取在 Client 客戶端,也就是瀏覽器內的 Local Storage,所以當清空紀錄時,就無法再救回來,刪除前請斟酌。

更新紀錄

不斷修改 • 變得更好
  • v 3.0.7 - Fix 留言鏈結 bug。 - 2016-11-02 17:27:32
  • v 3.0.6 - 放寬上圖檔案大小限制。 - 2016-11-02 17:11:23
  • v 3.0.5 - 有新回覆動態移到第一個。 - 2016-11-02 14:33:06
  • v 3.0.4 - 修復通知視窗跳頻問題。 - 2016-11-02 13:42:22
  • v 3.0.3 - 修復通知問題。 - 2016-11-02 13:21:21
  • v 3.0.2 - 調整版型。 - 2016-11-02 10:49:25
  • v 3.0.1 - 調整版型、加入 Coach Mark 為新人導覽。 - 2016-11-02 09:09:03
  • v 3.0.0 - 調整版型、新增功能(留言、喜歡、地點、上傳圖片)。 - 2016-11-02 02:13:01
  • v 2.2.2 - 修正 Marker Clustering Z-index 問題。 - 2016-10-28 10:50:37
  • v 2.2.1 - 修正 Marker Clustering(標記叢集) 的使用方式。 - 2016-10-27 20:29:32
  • v 2.2.0 - 加入 Marker Clustering(標記叢集) 使用,調整效能。 - 2016-10-27 09:46:03
  • v 2.1.2 - 加入 Facebook Like 按鈕。 - 2016-10-27 09:46:03
  • v 2.1.1 - 加入多樣 Emoji 圖示。 - 2016-10-26 17:22:41
  • v 2.1.0 - 修正跨時區問題、調整 Firebase Database 架構,加入 Coach Mark 為新人導覽。 - 2016-10-26 15:28:19
  • v 2.0.5 - 修正動態排序、調整通知 Timeout 問題。 - 2016-10-26 12:48:37
  • v 2.0.4 - 修正 bug,條版型,加入新增訊息效果。 - 2016-10-26 11:23:01
  • v 2.0.3 - 修正聊天室訊息錯亂。 - 2016-10-26 10:58:51
  • v 2.0.2 - 版型除錯。 - 2016-10-26 04:16:21
  • v 2.0.1 - 除錯。 - 2016-10-26 04:02:32
  • v 2.0.0 - 加強安全性、版面調整、聊天系統修改,修正體驗流程。 - 2016-10-26 03:57:31
  • v 1.5.1 - 調整權限配置。 - 2016-10-21 16:56:20
  • v 1.5.0 - 修正 Youtube 正規規則與圖片優先權、加入 Emoji 功能。 - 2016-10-21 13:50:14
  • v 1.4.1 - 修正時間回圈錯誤、調整 youtube 正規規則。 - 2016-10-21 10:18:38
  • v 1.4.0 - 修正 私訊規則,加強安全性問題。 - 2016-10-21 12:55:12
  • v 1.3.2 - 修正 私訊列表順序、回覆訊息的 bug,調整版型、改字義、修正更新造成的問題。 - 2016-10-20 01:09:31
  • v 1.3.1 - 修正 Youtube 正規規則,拿掉 log、Fix 私訊 bug。 - 2016-10-20 12:53:04
  • v 1.3.0 - 調整私訊通知功能手機也能收、調整 Realtime Database 架構。 - 2016-10-20 12:30:02
  • v 1.2.1 - 修正中文 Enter 發送問題,調整 css。 - 2016-10-20 02:45:22
  • v 1.2.0 - 增加功能可上鏈結 youtube image、字詞修正、修正版型。 - 2016-10-20 02:30:12。
  • v 1.1.0 - 修正版型、Realtime Database 架構、調整效能、加入 OAuth 聲明。 - 2016-10-19 15:22:12。