javascript - 如何动态设置谷歌地图样式

Question

使用 Google Map APi v3，有样式选项，例如:

   {
     featureType: 'transit.line',
     elementType: 'geometry',
     stylers: [
        { hue: '#fc0101' },
        { visibility: 'on' }
     ]
    }

这适用于 map 加载，如 API 示例所示:https://developers.google.com/maps/documentation/javascript/examples/maptype-styled-simple

我需要添加一个点击事件来显示或更改某种样式，例如，如果我在 dom 事件上更改上述代码的 hue 值。

示例代码:

// a link to test map changes
var testDiv = document.getElementById("test");

// add click event listener for map
google.maps.event.addDomListener(testDiv, 'click', showTest);

// the function for setZoom works 
function showTest() {
    map.setZoom(2); 
}

我找不到任何设置样式的文档，没有“设置”，https://developers.google.com/maps/documentation/javascript/reference#StyledMapType

setOptions 包含一个 styles 属性，但我无法让它工作。

一个不起作用的例子:

 // turn off transit line visibility on click
function showTest() {
    map.setOptions({
        styles : {
            featureType: 'transit.line',
            elementType: 'geometry',
            stylers: [
                { hue: '#fc0101' },
                { visibility: 'off' }
            ]
        }
    });
}

• 缩放事件的工作示例(只是缩小 map ): http://codepen.io/anon/pen/yfGxm

• 带有样式事件的非工作示例(这设置为删除
  以黑色显示的公交线路):http://codepen.io/anon/pen/CphbA

编辑:下面的答案很好，我没有意识到这里也记录了这一点:https://developers.google.com/maps/documentation/javascript/styling?csw=1

Answer 1

http://codepen.io/jolsalazar/full/anKqG

这里是示例代码:

var map;
var chicago = new google.maps.LatLng(41.850033, -87.650052);

function initialize() {

  var roadAtlasStyles = [
    {
      featureType: 'transit.line',
      elementType: 'geometry',
      stylers: [
        { hue: '#ff0000' },
        { visibility: 'on' },
        { lightness: -70 }
      ],
      enableCloseButton: true,
      visible: false
    }
  ];

  var mapOptions = {
    zoom: 12,
    center: chicago,
    mapTypeControlOptions: {
      mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'usroadatlas']
    }
  };

  map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

  var styledMapOptions = {
    name: 'US Road Atlas'
  };

  var usRoadMapType = new google.maps.StyledMapType(
      roadAtlasStyles, styledMapOptions);


  map.mapTypes.set('usroadatlas', usRoadMapType);
  map.setMapTypeId('usroadatlas');

  google.maps.event.addDomListener(document.getElementById('test'), 'click', function() {
    map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
  });

}

jQuery(document).ready(function () {
    google.maps.event.addDomListener(window, 'load', initialize);
});