谷歌地图在灰度

有没有什么方法可以在灰度上显示Google Map（通过Javascript APIembedded）而不会丢失任何其他function？

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

有一个更简单的方法（比较@Roatin Marth的最佳答案 ），通过直接将您使用Google Maps API风格映射向导生成的样式包括到google.maps.MapOptions对象中，使用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地图API样式化地图向导完成样式自定义时，通过单击“地图样式”面板中的“显示JSON”button，可以在mapOptionsvariables的styles属性下设置数组。

Answer 3

只需使用CSS3灰度（）滤镜效果为Google地图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元素。 我不知道Google是否经常改变dom结构，但是现在说（2014年11月25日）这个工作正常。

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

Answer 4

看看这个：

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

奇迹般有效 ：）

Answer 5

IE有filter: gray指令。

它呈现任何灰度的HTML元素。 JSFiddle 在这里 。

您可以将其应用于地图的父DIV。 它可能会将其包含的地图变成灰度级重新渲染。 我不能说这是否会产生副作用 – 你必须尝试。 但是这很可能。

只有IE版本，但从版本4开始支持。

灰度筛选文档在MSDN

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

Answer 6

是的，Google地图提供了第三方API，可以提供灰度（时髦地图）。

它非常简单。 您可以使用此网站获取谷歌地图的不同的配色scheme。

http://snazzymaps.com

Answer 7

除了在Google上写出优秀的人物，并要求他们创build所有图像切片的灰度版本和可选的API参数之外，