2014年8月21日 星期四

google maps api 更改地圖樣式

google maps api 可以輕鬆自定自己想要的地圖樣式,覺得地標太多太雜,或想要自定一個喜歡的色系,用這個就可以了。

參考官網範例:

  1. var map;   
  2. var brooklyn = new google.maps.LatLng(40.6743890, -73.9455);   
  3.   
  4. var MY_MAPTYPE_ID = 'custom_style';   
  5.   
  6. function initialize() {   
  7.   
  8.   var featureOpts = [   
  9.     {   
  10.       stylers: [   
  11.         { hue: '#890000' },   
  12.         { visibility: 'simplified' },   
  13.         { gamma: 0.5 },   
  14.         { weight: 0.5 }   
  15.       ]   
  16.     },   
  17.     {   
  18.       elementType: 'labels',   
  19.       stylers: [   
  20.         { visibility: 'off' }   
  21.       ]   
  22.     },   
  23.     {   
  24.       featureType: 'water',   
  25.       stylers: [   
  26.         { color: '#890000' }   
  27.       ]   
  28.     }   
  29.   ];   
  30.   
  31.   var mapOptions = {   
  32.     zoom: 12,   
  33.     center: brooklyn,   
  34.     mapTypeControlOptions: {   
  35.       mapTypeIds: [google.maps.MapTypeId.ROADMAP, MY_MAPTYPE_ID]   
  36.     },   
  37.     mapTypeId: MY_MAPTYPE_ID   
  38.   };   
  39.   
  40.   map = new google.maps.Map(document.getElementById('map-canvas'),   
  41.       mapOptions);   
  42.   
  43.   var styledMapOptions = {   
  44.     name: 'Custom Style'  
  45.   };   
  46.   
  47.   var customMapType = new google.maps.StyledMapType(featureOpts, styledMapOptions);   
  48.   
  49.   map.mapTypes.set(MY_MAPTYPE_ID, customMapType);   
  50. }   
  51.   
  52. google.maps.event.addDomListener(window, 'load', initialize);  


要改樣式的話只要改 featureOpts 就可以了,設定的地方可以看這邊的 API 說明

主要是指定 FeatureType 和 ElementType ,再設定 stylers 就可以了,說明不是很清楚的話,只要把要指定的部分丟上去,重整就可以看那個是不是你要的部分,稍微花一些時間調整就可以調整出想要的樣子了。

也可以透過這個工具調整完樣式後,複製 json 就可以了。

最近做的變革地圖就是這樣調出來的,有興趣的話就試試看吧。
反應:

0 意見:

Related Posts Plugin for WordPress, Blogger...