如何为Google Map应用灰度着色？解决新版Maps Styles无饱和度控制问题

问题背景 #

• 旧版基于云的Maps Styles具备饱和度控制功能，可轻松为陆地、海洋、河流等元素生成灰度效果，且不会影响InfoWindow弹窗等内容
• 新版基于云的Map Styles移除了该饱和度控制功能，且当前界面存在问题，无法单独设置所有地图要素样式，手动操作十分繁琐
• 用于在云地图平台外应用样式的新版JSON API尚未发布或提供文档，无法通过该方式手动配置
• 直接对Google Map的容器div应用CSS filter属性会同时影响地图标记和InfoWindow弹窗，不符合需求

可行解决方法 #

方法1：手动编写Styled Maps样式JSON #

针对地图的各类地理要素单独设置饱和度为0，同时排除标记、InfoWindow相关元素，保留其原有色彩。示例样式如下：

[
  {
    "featureType": "all",
    "elementType": "geometry",
    "stylers": [{"saturation": -100}]
  },
  {
    "featureType": "all",
    "elementType": "labels.text.fill",
    "stylers": [{"saturation": -100}]
  },
  {
    "featureType": "all",
    "elementType": "labels.text.stroke",
    "stylers": [{"saturation": -100}]
  },
  // 保留标记和POI图标的色彩
  {
    "featureType": "poi",
    "elementType": "labels.icon",
    "stylers": [{"saturation": 0}]
  },
  {
    "featureType": "marker",
    "stylers": [{"saturation": 0}]
  }
]

将上述JSON代码添加到地图初始化时的styles参数中，即可实现地图底图灰度化，同时不影响标记和InfoWindow的显示效果。

方法2：CSS滤镜隔离地图瓦片层 #

通过定位地图内部的瓦片图层容器，仅对该容器应用灰度滤镜，避免影响标记和弹窗：

1. 地图初始化完成后，找到负责加载底图瓦片的DOM容器（可通过浏览器开发者工具定位，通常位于gm-style类下的子容器）
2. 为该容器添加CSS样式：

.map-tiles-layer {
  filter: grayscale(100%);
}

该方法仅作用于地图底图，标记和InfoWindow处于独立层级，不会被滤镜影响。注意：Google Maps的DOM结构可能随版本更新变化，需根据实际情况调整容器选择器。

内容的提问来源于stack exchange，提问作者jamieburchell