實作 Instagram Maps 相片地圖 Instagram App 當中有一項很特別的功能是我很喜愛的,就是地圖模式的瀏覽照片,而且 Instagram 將這項功能優化得不錯,使得當地圖縮小時,密集的 Marker 會合成一個 Marker,而這樣的地圖功能在 Google Maps JavaScript API 上可以實作得到! 簡單說,這個專案的目的是利用 Google Mpas 來模…

實作 Instagram Maps 相片地圖

Instagram App 當中有一項很特別的功能是我很喜愛的,就是地圖模式的瀏覽照片,而且 Instagram 將這項功能優化得不錯,使得當地圖縮小時,密集的 Marker 會合成一個 Marker,而這樣的地圖功能在 Google Maps JavaScript API 上可以實作得到!

簡單說,這個專案的目的是利用 Google Mpas 來模擬實作出 Instagram 地圖照片模式!基本上會使用 Google Maps API、MarkerClustererMarkerWithLabel

架構是當我移動地圖畫面時,會先利用 Google Maps LatLngBounds 物件計算出多邊形的範圍(東北-西南)座標,然後再將範圍座標的經緯度使用 AJAX 傳至後端,後端則依據範圍座標撈出範圍內的所有點,並且輸出 Json 格式的資訊給前端 JavaScript 接收處理,前端取得資料後接著利用 MarkerWithLabel 來顯示照片,最後當地圖縮放時,則是利用 MarkerClusterer 將太密集的點縮成一個集合!

※ 因系統維護關係,所以目前已暫時先將 Live Demo 網址關閉囉,請大家先參考 GitHub 的原始碼吧!

相關參考

CatMap - OA Wu's Blog
CatMap
CatMap 此作是我第一個比較完整的 iOS 的 App,主要利用基本的 iOS 元件製作照相上傳、分享、地圖功能,以下是我一些學習的筆記與心得! App 沒什麼主要方向,這就只是個到處模仿的小作品,一開始利用了 TableView,再經由客製化的 TableViewCell 去做出類似 Instagram、Facebook 的動態訊息頁,然後再利用 ImagePickerCon…
天氣地圖 Weather Maps - OA Wu's Blog
天氣地圖 Weather Maps
天氣地圖 Weather Maps 這項做主要是藉由中央氣象局的網站資料建置出來的,其中主要功能是可以藉由 Google Maps 查詢各地方的天氣預報概況,並且可以查看各個地區的每小時溫度變化,以及搭配使用 localStorage 來實作前端關注的功能。此作品主要利用 PHP 取得資料,並且編譯成 HTML 檔案上傳 Amazon S3,此架構不僅可以減…
實作 Google Maps 右鍵選單 - OA Wu's Blog
實作 Google Maps 右鍵選單
實作 Google Maps 右鍵選單 此作品主要在於開發出可以在 Google Maps 上面編輯基本路徑的功能,利用 Google Maps JavaScript API 設計出規劃路線的工具,並且可以匯出路間經緯度 Excel。 在 Google Maps 上顯示選單,主要是使用 Google Maps JavaScript Events 來實作,並且搭配 Marker、Polyline 來繪製出路線圖,並且針…
在 Google Maps 內多邊形取點 Point in Polygon - OA Wu's Blog
在 Google Maps 內多邊形取點 Point in Polygon
在 Google Maps 內多邊形取點 Point in Polygon 這是項個人開發的工具,而且需要前後端配合一起弄的作品,主要目的是撈出藉由不規則多邊形範圍內的點座標。 前端 主要是 Google Maps JavaScript API v3 的地圖服務應用,利用 Google Maps Marker、Google Maps Polyline 去畫出一個不規則多邊形,並且利用 Ajax 去後端撈取…
吳政賢個人簡歷OA WuLiveCoding.tw
OA Wu's Blog
開發心得
實作 Instagram Maps 相片地圖