Javascript 灰度谷歌地图
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4003578/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Google Maps in Grayscale
提问by DLiKS
Is there any way to display a Google Map (embedded via the Javascript API) in grayscale without losing any other functionality?
有没有办法在不丢失任何其他功能的情况下以灰度显示谷歌地图（通过 Javascript API 嵌入）？
回答by Roatin Marth
Yes, in V3 of the api they have introduced StyledMaps.
是的，在他们引入的 api 的 V3 中StyledMaps。
They've even provided a toolfor you to generate the code for the styles you like. Slide the "Saturation" all the way down and you've got grayscale going on!
他们甚至为您提供了一个工具来为您喜欢的样式生成代码。将“饱和度”一直向下滑动，灰度就开始了！
The following example displays a grayscale map of Brooklyn:
以下示例显示了布鲁克林的灰度地图：
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');
回答by Nik Sumeiko
There's a little shorter way (comparing to @Roatin Marth's best answer) to make your Google map grayscale with Google Maps JavaScript API v3by directly including styles you generated with Google Maps API Styled Map Wizardinto google.maps.MapOptionsobject:
有一种更短的方法（与@Roatin Marth 的最佳答案相比）通过将您使用Google Maps API Styled Map Wizard生成的样式直接包含到对象中来使用Google Maps JavaScript API v3使您的 Google 地图灰度化：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);
You get the array set under stylesproperty in mapOptionsvariable by clicking onto "Show JSON" button inside Map Style panel when finishing your styles customisation using Google Maps API Styled Map Wizard.
使用Google Maps API Styled Map Wizard完成样式自定义后，通过单击“地图样式”面板中的“显示 JSON”按钮，可以styles在mapOptions变量属性下设置数组。
回答by TheodorosPloumis
Just use CSS3 grayscale()filter effect for the Google maps iframe element! It works because the js code prints images.
只需对 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 */
}
Try also to target only the background imagesby applying this to the very first div element under the div.gm-style(or any other wrapper). I don't know if Google changes the dom structure often but at the moment speaking (25 Nov 2014) this works fine.
还尝试通过将其应用于（或任何其他包装器）下的第一个 div 元素来仅定位背景图像div.gm-style。我不知道 Google 是否经常更改 dom 结构，但目前（2014 年 11 月 25 日）这很好用。
iframe .gm-style > div:first-child {
// Same code here
}
回答by HasanAboShally
Check out this:
看看这个：
http://snazzymaps.com/style/15/subtle-grayscale
http://snazzymaps.com/style/15/subtle-grayscale
Works like a charm :)
奇迹般有效 ：）
回答by Pekka
IE has the filter: graydirective.
IE 有filter: gray指令。
It renders any HTML element in grayscale. JSFiddle here.
它以灰度呈现任何 HTML 元素。JSFiddle在这里。
You maybe able to apply this to the map's parent DIV. It mayturn the map it contains in to a grayscale represtenation. I can't say whether this will work without side effects - you'd have to try. But it's well possible.
您可以将其应用于地图的父 DIV。它可能会将其包含的地图转换为灰度再现。我不能说这是否会在没有副作用的情况下起作用 - 你必须尝试。但这很有可能。
IE only, though, but supported since Version 4.
仅 IE，但从版本 4 开始支持。
Other than that, I think there is a Flash API for Maps, isn't there? It might be easier to achieve there.
除此之外，我认为地图有一个 Flash API，不是吗？在那里实现可能更容易。
回答by swathi_sri
Use the CSS filter property to convert the google map to black and white. 100% is completely black and white
使用 CSS filter 属性将谷歌地图转换为黑白。100% 完全是黑白的
selector {
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);
}
回答by Bastin Robin
Yes, there is a third party API for Google maps that provides gray-scale (snazzymaps).
是的，谷歌地图有第三方 API 提供灰度（snazzymaps）。
Its very simple. You can use this website to get the different color scheme for google maps.
它非常简单。您可以使用此网站获取 google 地图的不同配色方案。
回答by Stan Rogers
Apart from writing the good people at Google and asking them to create grey-scale versions of all of their image tiles and an optional API parameter, no.
除了写谷歌的好人并要求他们创建所有图像图块的灰度版本和一个可选的 API 参数之外，没有。
