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

我需要添加一个点击事件来显示或更改某个样式，例如，如果我在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); 
}

我找不到任何设置样式的文件，没有＆＃34;设置＆＃34;，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?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);
});

我希望你能服务。

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});
}

如何动态设置Google地图样式

2 个答案: