吳政賢 OA Wu LiveCoding.tw
實作 Instagram Maps 相片地圖 - OA Wu's Blog

實作 Instagram Maps 相片地圖

前端 Google HTML API WEB JavaScript CSS CSS3 HTML5 jQuery SCSS Compass Gulp OAF2E PHP Google 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 的原始碼吧!