谷歌地图在灰度 [英] Google Maps in Grayscale

问题描述

是否有任何方式以灰度显示Google Map（通过Javascript API嵌入）而不会丢失任何其他功能？ 解决方案

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

他们甚至提供了一个工具，供您为您喜欢的样式生成代码。将饱和度一路向下滑动，并且灰度变大！

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

  var map; 
 var brooklyn = new google.maps.LatLng（40.6743890，-73.9455）; 
 $ b $ var stylez = [
 {
 featureType：all，
 elementType：all，
 stylers：[
 {saturation ：-100} //<  - 这
] 
} 
]; 
 
 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'）; 
  

Is there any way to display a Google Map (embedded via the Javascript API) in grayscale without losing any other functionality?

解决方案

Yes, in V3 of the api they have introduced StyledMaps.

They've even provided a tool for 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');

这篇关于谷歌地图在灰度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！