如何动态设置Google地图样式

Question

使用Google Map APi v3,有一些样式选项,例如:

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

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

我需要添加一个click事件来显示或更改某个样式,例如,如果我hue在dom事件上更改上面的代码值.

示例代码:

// 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' }
            ]
        }
    });
}

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

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

编辑:下面的答案非常好,我没有意识到这也记录在这里:https://developers.google.com/maps/documentation/javascript/styling？cscs = 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);
});

我希望你服务.

Answer 2

对我来说， map.setOptions() 非常适合设置样式。我想你忘记了 [] 括号。

您可以按如下方式更改地图样式：

// turn off transit line visibility on click
function showTest() {

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

    map.setOptions({styles: myStyle});
}