Instagram Maps - iOA
Instagram Maps - iOA

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 將太密集的點縮成一個集合!

以上就是這次 Instagram Maps 的開發心得如有任何問題歡迎來信討論。