javascript - 灰度 Google map

Question

有没有什么方法可以在不丢失任何其他功能的情况下以灰度显示 Google map (通过 Javascript API 嵌入)？

Answer 1

是的，他们在 API 的 V3 中引入了 StyledMaps .

他们甚至 provided a tool为您生成您喜欢的样式的代码。将“饱和度”一直向下滑动，您就会得到灰度!

以下示例显示布鲁克林的灰度 map :

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