Google Map Layer效果

Question

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

如下所示：

​

​

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

​

​

但我不知道谷歌地图Api。

有简单的方法还是其他的解决方案？谢谢。

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

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