谷歌地图图层效果答案

【问题标题】：Google Map Layer Effect谷歌地图图层效果
【发布时间】：2012-06-08 13:12:38
【问题描述】：

我创建了一个 div 并嵌入了 Google Map 代码。

像这样：

但是，我想在我的谷歌地图上生效。

但我不知道 Google Map Api。

有简单的方法或其他解决方案吗？谢谢。

【问题讨论】：

标签： google-maps google-maps-styled

【解决方案1】：

您可以自定义地图的样式。在这种情况下，您可能只想将饱和度设置为 -100。

对于静态地图，url 可能是：http://maps.googleapis.com/maps/api/staticmap?center=0,0&zoom=2&format=png&sensor=false&size=640x480&maptype=roadmap&style=saturation:-100

对于动态地图，只需创建一个样式并将其传递到您的地图选项中：

var styles = [
  {
    stylers: [
      { saturation: -100 }
    ]
  }
]

var mapOptions = {
  zoom: 12,
  center: new google.maps.LatLng(47.5,-122.5),
  styles : styles
}

var map = map = new google.maps.Map(document.getElementById("map_canvas"),
      mapOptions);

【讨论】：

【解决方案2】：

我会检查Google Maps API。里面都提到了。

【讨论】：

【解决方案3】：

这是一个链接，您可以在其中设置地图样式：http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html

我刚做了这个，应该看起来很相似。

    var styles = [
  {
    "featureType": "road.arterial",
    "stylers": [
      { "color": "#a0a0a0" },
      { "visibility": "on" }
    ]
  },{
    "featureType": "road.highway",
    "stylers": [
      { "color": "#c9c8c8" }
    ]
  },{
    "featureType": "landscape",
    "elementType": "geometry.fill",
    "stylers": [
      { "color": "#e3e3e3" }
    ]
  },{
    "featureType": "road",
    "elementType": "labels.text.fill",
    "stylers": [
      { "color": "#434443" },
      { "visibility": "on" }
    ]
  },{
    "featureType": "road",
    "elementType": "labels.icon",
    "stylers": [
      { "visibility": "off" }
    ]
  },{
    "featureType": "water",
    "elementType": "geometry.fill",
    "stylers": [
      { "color": "#f7f9fb" }
    ]
  },{
    "featureType": "road",
    "elementType": "labels.text.stroke",
    "stylers": [
      { "color": "#ffffff" }
    ]
  },{
    "featureType": "poi",
    "elementType": "geometry.fill",
    "stylers": [
      { "color": "#d6d5d5" },
      { "visibility": "on" }
    ]
  },{
    "featureType": "poi",
    "elementType": "labels.text.fill",
    "stylers": [
      { "color": "#434443" }
    ]
  },{
  }
];

map.setOptions({styles: styles});

【讨论】：