灰度的Google地图

Question

有没有办法以灰度显示谷歌地图(通过Javascript API嵌入)而不会丢失任何其他功能？

Answer 1

是的,在他们介绍的api的V3中StyledMaps.

他们甚至为您提供了一个工具,可以为您喜欢的样式生成代码.将"饱和度"完全滑下,你就可以进行灰度测量!

以下示例显示布鲁克林的灰度图:

var map;
var brooklyn = new google.maps.LatLng(40.6743890, -73.9455);

var stylez = [
    {
      featureType: "all",
      elementType: "all",
      stylers: [
        { saturation: -100 } // <-- THIS
      ]
    }
];

var mapOptions = {
    zoom: 11,
    center: brooklyn,
    mapTypeControlOptions: {
         mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'tehgrayz']
    }
};

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

var mapType = new google.maps.StyledMapType(stylez, { name:"Grayscale" });    
map.mapTypes.set('tehgrayz', mapType);
map.setMapTypeId('tehgrayz');

Answer 2

通过直接将您使用Google Maps API样式化地图向导生成的样式包含在对象中,使用Google Maps JavaScript API v3制作Google地图灰度图标(与@Roatin Marth的最佳答案相比)有一个更短的方式(与@Roatin Marth的最佳答案相比):google.maps.MapOptions

var container = document.getElementById('map_canvas');
var mapOptions = {
  zoom: 11,
  center: new google.maps.LatLng(40.6743890, -73.9455),
  styles: [{
    stylers: [{
      saturation: -100
    }]
  }]
};

var map = new google.maps.Map(container, mapOptions);

通过使用Google Maps API样式化地图向导完成样式自定义后,单击"地图样式"面板中的"显示JSON"按钮,可以获得变量styles属性下的数组.mapOptions

Answer 3

只需对Google地图iframe元素使用CSS3灰度()滤镜效果!它的工作原理是因为js代码可以打印图像.

iframe { 
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: url(grayscale.svg); /* Firefox 4+ */
  filter: gray; /* IE 6-9 */
}

也可以尝试仅将背景图像应用于div.gm-style(或任何其他包装器)下的第一个div元素.我不知道谷歌是否经常更改dom结构,但此刻(2014年11月25日)这个工作正常.

iframe .gm-style > div:first-child {
  // Same code here
}