Uniform Map 制服地圖- 學校群組以及調整主選單

這週末Uniform Map 制服地圖做了一些之前就很想做的調整,第一個是當學校的旗子擠在一起的時候,會把旗子給群組起來,所以當拉遠到一定距離後,就會變成像這樣。

Uniform Map

這樣可以從圈圈裡看到有多少學校在裡面,而不是一堆旗子而已了。

使用方法可以參考Google Map API,引入 markerclusterer.js 後,再參考範例碼改成你要的就可以了。

  1. var map = new google.maps.Map(document.getElementById("map"), options);   
  2.   
  3. var markers = [];   
  4. for (var i = 0; i < 100; i++) {   
  5.   var latLng = new google.maps.LatLng(data.photos[i].latitude,   
  6.       data.photos[i].longitude);   
  7.   var marker = new google.maps.Marker({'position': latLng});   
  8.   markers.push(marker);   
  9. }   
  10. var markerCluster = new MarkerClusterer(map, markers);  


另一個則是加大主選單的高度,並調整成依解析度變化,一般電腦解析度下是長這樣。

Uniform Map


當用手機或較小解析度則會變這樣。

Uniform Map

因為之前投票發現用手機看的人實在太多了,所以必須要做這樣的調整,只是還沒有每一頁都換成這種選單,會等內容也調整成 RWD 後,再把那些頁面換成這種選單,RWD 已經不是趨勢,而是非做不可的調整了。

留言

熱門文章