google-maps - 谷歌地图图层效果

Question

我创建了一个 div 并嵌入了谷歌地图代码。

像这样：

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

但我不知道 Google Map Api。

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

Answer 1

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

对于静态地图，网址可能是：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);

Answer 2

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

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