Question

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

Answer 1

是的，在api的V3中他们引入了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');

Answer 2

与@Roatin Marth＆＃39; s best answer相比，通过直接包含您使用{{3}生成的样式，使用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);

通过单击＆＃34;显示JSON＆＃34;获取styles变量mapOptions属性下的数组集。使用Google Maps API Styled Map Wizard完成样式自定义时，“地图样式”面板中的按钮。

JSON output demonstrating styles array to set into mapOptions

Answer 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元素，尝试仅定位背景图像。我不知道谷歌是否经常改变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 here。

你可能能够将其应用于地图的父DIV。可以将其包含的地图转换为灰度重新定位。我不知道这是否会起作用而没有副作用 - 你必须尝试。但这很有可能。

仅限IE，但自第4版以来一直受支持。

Grayscale Filter docs at MSDN

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

Answer 6

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

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

Answer 7

是的，Google地图有第三方API提供灰度（snazzymaps）。

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

http://snazzymaps.com

Answer 8

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

灰度的Google地图

8 个答案: