GoogleMap V3 样式

https://developers.google.com/maps/documentation/javascript/styling?hl=zh-CN

样式化地图
    自定义 Google 标准基本地图的显示方式，更改道路、公园和建筑物区域等元素的视觉显示效果。   

可通过以下两种方式将样式应用到地图：
    设置地图的 MapOptions 对象的 .styles 属性。该方法会更改标准地图类型的样式（地形和卫星视图中的基本图像不会受到影响，不过道路、标签等需符合样式化规则）。请参阅更改默认地图样式。
    创建和定义 StyledMapType，并将其附加到地图。该方法会创建一个新的地图类型，您可从地图类型控件中选择该类型。请参阅创建 StyledMapType。
    以上两种方法都采用 MapTypeStyle 数组，其中每个数组都包含选择器和样式器。选择器用于指定要进行样式化应选择的地图组件，而样式器用于指定这些元素的视觉效果修改。
   
样式化地图使用以下两种概念对地图应用颜色和更改：
    地图项，即可定位在地图上的地理元素，包括道路、公园、水体及其标签等。
        地图由道路或公园等一组地图项组成，这些地图项使用 MapTypeStyleFeatureType 进行指定。地图项类型构成类别树，以 all 为根。
        地图项使用语法 featureType: 'feature' 进行指定。
        {
            featureType: "road"
        }
        某些地图项类型类别包含子类别，这些子类别通过点表示法（例如 landscape.natural 或 road.local）进行指定。
        地图上的某些地图项会包含不同元素。例如，道路不仅包括地图上绘制的地理线（几何图形），还包括表示其名称的文本（标签）。您可指定 MapTypeStyleElementType 类型的类别，以选择地图项内的元素。系统支持以下元素类型：
            all（默认），用于选择地图项的所有元素。
            geometry，用于选择地图项的所有几何图形元素。
                geometry.fill，用于只选择地图项中几何图形的填充。
                geometry.stroke，用于只选择地图项中几何图形的笔触。
            labels，用于只选择与地图项关联的文本标签。
                labels.icon，用于只选择地图项标签中显示的图标。
                labels.text，用于只选择标签的文本。
                labels.text.fill，用于只选择标签的填充。标签的填充通常呈现为标签文本周围的彩色轮廓。
                labels.text.stroke，用于只选择标签文本的笔触。
        {//适用于所有本地道路的标签
            featureType: "road.local",
            elementType: "labels"
        }
       
    样式器，即可应用到地图项的颜色和可见性属性，用于通过组合色相、色彩和亮度/灰度值来定义显示颜色。
        样式器是应用于地图项的 MapTypeStyler 类型的格式化选项。系统支持以下 MapTypeStyler 选项：
            hue（RGB 十六进制字符串），用于表示基本颜色。
            lightness（介于 -100 和 100 之间的浮点值），用于表示元素的亮度变化百分比。负值用于增加暗度（其中 -100 指定为黑），而正值用于增加亮度（其中 +100 指定为白）。
            saturation（介于 -100 和 100 之间的浮点值），用于表示要应用到元素的基本颜色的色度变化百分比。
            gamma（介于 0.01 和 10.0 之间的浮点值，其中 1.0 表示不应用任何校正）用于表示要应用到元素的灰度系数校正量。灰度系数以非线性方式修改色相亮度，而不会影响白色值或黑色值。灰度系数通常用于修改多个元素的对比度。例如，您可以通过修改灰度系数来提高或降低元素的边缘与内部间的对比度。低灰度系数值（小于 1）可提高对比度，而高值（大于 1）则可降低对比度。
            inverse_lightness（如果为 true），用于仅对调现有的亮度。例如，使用此选项可快速切换为带有白色文本的暗色地图。
            visibility（on、off 或 simplified），用于表示元素是否以及怎样显示在地图上。simplified 可见度用于从受影响的地图项删除若干样式化地图项；例如，道路会简化为较细的线（不具备轮廓），而公园则会在保留标签图标的情况下删除其中的文本。
            color（RGB 十六进制字符串），用于设置地图项的颜色。
            width（大于或等于零的整数），用于设置地图项的宽度（以像素为单位）。为此宽度设置高值可能会导致图块边界附近被剪裁。
        地图项的颜色可以使用单独的 color 值设置，也可以组合使用 hue、saturation 和 lightness 进行修改。样式器操作中使用色相、饱和度、亮度 (HSL) 模型来表示样式化地图的颜色。这些用于定义颜色的操作在图形设计领域很常见。色相表示基本颜色，饱和度表示颜色的色度，而亮度则表示组合色中黑色或白色所占的相对比重。
        样式器规则会按照其在 MapTypeStyler 数组中的显示顺序进行应用。
       
        stylers: [ //亮蓝色显示地图项.
            { hue: "#00d4ff" },
            { saturation: 60 },
            { lightness: -20 },
            { gamma: 1.51 }
        ]
        //亮绿色显示地图项，同时使用单个 RGB 值
        stylers: [
            { color: "#99FF33" }
        ]
        删除地图项中的所有颜色（无论最初为哪种颜色）
        stylers: [
            { saturation: -100 }
        ]   
        完全隐藏地图项
        stylers: [
            { visibility: "off" }
        ]
    样式数组示例
        样式数组由地图项选择器和样式器规则组成。您可在一个数组中定位任意数量的地图项。
        以下示例将所有的地图项都转换为了灰色，然后将主干道几何图形设为蓝色，并完全隐藏商家标签：
        var styleArray = [
        {
            featureType: "all",
            stylers: [
                { saturation: -80 }
            ]
        },{
            featureType: "road.arterial",
            elementType: "geometry",
            stylers: [
                { hue: "#00ffee" },
                { saturation: 50 }
            ]
        },{
            featureType: "poi.business",
            elementType: "labels",
            stylers: [
                { visibility: "off" }
            ]
        }
        ];

 

示例，基本用法

	<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>
function initialize() {
	var lanLng = new google.maps.LatLng(30.51667,114.31667);
	//将所有的地图项都转换为了灰色，然后将主干道几何图形设为蓝色，并完全隐藏商家标签：
	var styleArray = [
	{
	  featureType: 'all',
	  stylers: [
		{ saturation: -80 }
	  ]
	},{
	  featureType: 'road.arterial',
	  elementType: 'geometry',
	  stylers: [
		{ hue: '#00ffee' },
		{ saturation: 50 }
	  ]
	},{
	  featureType: 'poi.business',
	  elementType: 'labels',
	  stylers: [
		{ visibility: 'off' }
	  ]
	}
	];

  var mapOptions = {
    zoom: 12,
    center: lanLng,
    styles: styleArray,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
	<div id="map-canvas"></div>
</body>

 杂乱示例

<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
function initialize() {

// Create an array of styles.
var styles =   [
	{
		//亮蓝色显示地图项,all（默认），用于选择地图项的所有元素。
		featureType: 'all',
		stylers: [
			{ hue: "#FF5500" },
			{ saturation: 80 },
			{ lightness: -20 },
			{ gamma: 1.51 }
		]
	},{
		featureType: "road",
		stylers:[
			{color:"#7AB900"},
			{inverse_lightness:true}
		]
	},{
		//主干道几何图形设为蓝色
		featureType: "road.arterial",
		elementType: "geometry",
		stylers: [
			{ hue: "#FF0000" },
			{ saturation: 50 },
			{ width:2}
		]
    },
	{
		//适用于所有本地道路的标签
		featureType: "road.local",
		elementType: "labels" 
    },
	{
		//完全隐藏商家标签
		featureType: "poi.business",
		elementType: "labels",
		stylers: [
			{ visibility: "off" }
		]
	}
  ];

  // Create a new StyledMapType object, passing it the array of styles,
  // as well as the name to be displayed on the map type control.
  var styledMapType = new google.maps.StyledMapType(styles,
    {name: 'Styled Map'});

  // Create a map object, and include the MapTypeId to add
  // to the map type control.
  var mapOptions = {
    zoom: 12,
    center: new google.maps.LatLng(30.51667,114.31667),
    mapTypeControlOptions: {
      mapTypeIds: [google.maps.MapTypeId.ROADMAP,
        google.maps.MapTypeId.SATELLITE, google.maps.MapTypeId.HYBRID,
        google.maps.MapTypeId.TERRAIN, 'styled_maps']
    }
  };
  var map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);

  // Associate the styled map with the MapTypeId and set it to display.
  map.mapTypes.set('styled_maps', styledMapType);
  map.setMapTypeId('styled_maps');
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
    <div id="map-canvas"></div>
</body>

 

 附件为官网上例子。