Javascript 灰度谷歌地图

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

除了写谷歌好人并要求他们创建所有图像块的灰度版本和可选的API参数之外，没有。

IE有

过滤器：gray

指令

它以灰度呈现任何HTML元素。JSFiddle

您可以将其应用于贴图的父DIV。它可以将其中包含的贴图转换为灰度表示。我不能说这是否会在没有副作用的情况下起作用——你必须试试。但这很有可能

虽然只支持IE，但从版本4开始就支持IE

---

除此之外，我认为还有一个用于地图的Flash API，不是吗？在那里可能更容易实现。

是的，在他们引入的api的V3中

他们甚至为您生成您喜欢的样式的代码。把“饱和度”一直往下滑，你就可以看到灰度了

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

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

var映射；
var brooklyn=new google.maps.LatLng（40.6743890，-73.9455）；
var stylez=[
{
featureType:“全部”，
元素类型：“全部”，
样式：[
{saturation:-100}/只需对Google maps iframe元素使用过滤效果！它可以工作，因为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
}

是的，谷歌地图有一个第三方API，提供灰度（snazzymap）

这很简单。你可以使用这个网站获得谷歌地图的不同配色方案

查看以下内容：


工作起来很有魅力：）
与@Roatin Marth相比，通过直接将生成的样式包含到
Google.maps.MapOptions
对象中，有一种更短的方法可以使您的Google地图灰度化：

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

在使用完成样式自定义时，通过单击Map Style面板内的“Show JSON”按钮，可以在
mapOptions
变量的
styles
属性下获得数组集

使用CSS过滤器属性将谷歌地图转换为黑白。100%完全是黑白的

selector {
  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
}

我对此表示怀疑。在IE中，可能会使用一个DIV覆盖地图，该DIV使用DirectX
filter
CSS属性之一，使其下面的任何内容都具有灰度，但它也会覆盖控件。有兴趣查看是否有任何内容与IE相关：仅将地图置于灰度并没有特别大的帮助由于应用程序的其余部分正在使用HTML5和Canvas进行编码-不过感谢您的回答！@DliKS是的。我认为没有跨浏览器的方法来实现这一点，
过滤器
的内容在其他浏览器中从未流行过。遗憾的是！…在Flash中可能会出现，我不知道…小心..彩色地图标记将以灰度t显示oo.最后一个我一直在寻找的！我喜欢这个，因为它可以将所有内容转换为灰度。js解决方案的问题是，你在地图嵌入中丢失了一些默认值。这太棒了。-我在grayscale.svg中遇到了一个问题，修改了该行，它对我很有用。如何恢复更改前的状态？更好的解决方案！Much更简单更好的解决方案应该被接受。