灰度谷歌地图答案

【问题标题】：Google Maps in Grayscale灰度谷歌地图
【发布时间】：2010-10-23 10:46:58
【问题描述】：

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

【问题讨论】：

我对此表示怀疑。在 IE 中，可以通过使用 DirectX filter CSS 属性之一的 DIV 覆盖地图来使其下方的任何内容变为灰度，但它也会覆盖控件。有兴趣看看有什么事情发生
相关：gis.stackexchange.com/questions/5964/…

标签： javascript google-maps

【解决方案1】：

是的，在 V3 的 api 中他们已经引入了StyledMaps。

他们甚至为您提供了provided a tool 来生成您喜欢的样式的代码。将“饱和度”一直向下滑动，您就可以开始灰度了！

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

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

【讨论】：

如何恢复原样？

【解决方案2】：

通过将使用Google Maps API Styled Map Wizard 生成的样式直接包含到google.maps.MapOptions 对象中，有一种更短的方法（与@Roatin Marth 的best answer 相比）使用Google Maps JavaScript API v3 制作您的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);

在使用Google Maps API Styled Map Wizard 完成样式自定义时，通过单击“地图样式”面板中的“显示 JSON”按钮，可以在 mapOptions 变量中的 styles 属性下设置数组。

【讨论】：

更好的解决方案！
更简单更好的解决方案。应该被接受的答案。

【解决方案3】：

只需对 Google 地图 iframe 元素使用 CSS3 grayscale() 滤镜效果！它的工作原理是 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 元素来定位仅背景图像。我不知道 Google 是否经常更改 dom 结构，但目前（2014 年 11 月 25 日）这很好。

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

【讨论】：

..当心..彩色地图标记也会以灰度显示。
终于找到了我一直在寻找的那个！我喜欢这个，因为它把一切都变成了灰度。 js解决方案的问题是你丢失了地图嵌入中的一些默认值。
这太棒了。 - 我遇到了 grayscale.svg 的问题，省略了该行，它对我有用。

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

IE 有 filter: gray 指令。

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

您可能可以将此应用到地图的父 DIV。它可能将其包含的地图转换为灰度再现。我不能说这是否会没有副作用 - 你必须尝试。但这很有可能。

虽然仅限 IE，但从版本 4 开始支持。

Grayscale Filter docs at MSDN

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

【讨论】：

鉴于应用程序的其余部分正在使用 HTML5 和 Canvas 进行编码，因此仅对 IE 使用灰度地图并不会特别有帮助 - 不过感谢您的回答！
@DliKS 是的。我认为没有跨浏览器的方法可以做到这一点，filter 的东西从未在其他浏览器中流行。可悲！ ... 可能在 Flash 中，我不知道。

【解决方案6】：

看看这个：

http://snazzymaps.com/style/15/subtle-grayscale

像魅力一样工作:)

【讨论】：

【解决方案7】：

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

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

http://snazzymaps.com

【讨论】：

【解决方案8】：

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

【讨论】：