是否可以使用图像或CSS渐变来填充Google地图中的水域？

Question

我目前正在开展一些项目,需要实现Google Map的下一个设计.

我无法在Google地图样式参考中找到回答此问题的任何线索 - https://developers.google.com/maps/documentation/javascript/style-reference

所以,我很喜欢 - 它是否可能(仅使用API​​)？

还是需要一些黑客攻击？例如,我认为关于使水域透明并将虚线图像放在地图后面.

提前致谢!

Answer 1

在这个答案中，我将讨论关闭地图上水几何形状的可见性并设置地图后面的背景颜色。

首先，正如前面的答案所述，您必须关闭地图的可见性。您可以查阅有关样式器的谷歌文档，但代码非常简单：

styles: [{
              "elementType": "geometry.fill",
                  "stylers": [{
                  "visibility": "off"
              }]
          }, {
              "featureType": "landscape.natural.landcover",
                  "elementType": "geometry.fill",
                  "stylers": [{
                  "visibility": "on"
              }]
          }]

在这里，您在mapOptions地图中声明，首先要关闭水和陆地的可见性，其次要“打开”陆地的可见性。

styles: [{
              "elementType": "geometry.fill",
                  "stylers": [{
                  "visibility": "off"
              }]
          }, {
              "featureType": "landscape.natural.landcover",
                  "elementType": "geometry.fill",
                  "stylers": [{
                  "visibility": "on"
              }]
          }]

function initialize() {
          var mapOptions = {
		          zoom: 2,
              center: new google.maps.LatLng(43.27749, -92.658775),
              styles: [{
                  "elementType": "geometry.fill",
                      "stylers": [{
                      "visibility": "off"
                  }]
              }, {
                  "featureType": "landscape.natural.landcover",
                      "elementType": "geometry.fill",
                      "stylers": [{
                      "visibility": "on"
                  }]
              }]
          };
          map = new google.maps.Map(document.getElementById('map_canvas'),
          mapOptions);
      }

      google.maps.event.addDomListener(window, 'load', initialize);

其次，您必须删除地图的默认背景颜色（灰色）。这个问题已经在Stack Overflow中得到了解答。mapOptions您可以通过以下代码简单地使用地图的参数：

backgroundColor: 'none'

其中给出：

var mapOptions = {
              backgroundColor: 'none',
          zoom: 2,
          center: new google.maps.LatLng(43.27749, -92.658775),
          styles: [{
              "elementType": "geometry.fill",
                  "stylers": [{
                  "visibility": "off"
              }]
          }, {
              "featureType": "landscape.natural.landcover",
                  "elementType": "geometry.fill",
                  "stylers": [{
                  "visibility": "on"
              }]
          }]
      };
      map = new google.maps.Map(document.getElementById('map_canvas'),
      mapOptions);

一个简单的例子：

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&.js"></script>
<div id="map_canvas" style="height:300px;"></div>

backgroundColor: 'none'

最后，下面的代码片段是一个非常简单的示例。地图后面有渐变颜色，地图的默认背景颜色被删除，水的可见性被关闭。

var mapOptions = {
              backgroundColor: 'none',
          zoom: 2,
          center: new google.maps.LatLng(43.27749, -92.658775),
          styles: [{
              "elementType": "geometry.fill",
                  "stylers": [{
                  "visibility": "off"
              }]
          }, {
              "featureType": "landscape.natural.landcover",
                  "elementType": "geometry.fill",
                  "stylers": [{
                  "visibility": "on"
              }]
          }]
      };
      map = new google.maps.Map(document.getElementById('map_canvas'),
      mapOptions);

function initialize() {
          var mapOptions = {
		          backgroundColor: 'none',
              zoom: 2,
              center: new google.maps.LatLng(43.27749, -92.658775),
              styles: [{
                  "elementType": "geometry.fill",
                      "stylers": [{
                      "visibility": "off"
                  }]
              }, {
                  "featureType": "landscape.natural.landcover",
                      "elementType": "geometry.fill",
                      "stylers": [{
                      "visibility": "on"
                  }]
              }]
          };
          map = new google.maps.Map(document.getElementById('map_canvas'),
          mapOptions);
      }

      google.maps.event.addDomListener(window, 'load', initialize);

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&.js"></script>
<div id="map_canvas" style="height:300px;"></div>

请注意，这个结果是受到两篇文章的启发。第一个是上面的答案，第二个是Roman在Stack Overflow的这个地址中的答案。

Answer 2

注意：如果您有其他答案可以扩展我的答案，请随意复制该答案的任何部分。

据我所知，不支持颜色rgba。由于支持的颜色格式没有 Alpha 操作，因此我认为获得所需的结果并不容易。

我下面有两个例子。

由于某种原因，我必须多次单击运行代码片段（5-6 次）才能使其正常运行。（为什么？）

1- 使用十六进制格式的常规RGB颜色值来操纵水的颜色 - 有效，但没有透明度

function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
      center: {
        lat: 40.674,
        lng: -73.945
      },
      zoom: 12,
      styles: [{
        "featureType": "water",
        "elementType": "geometry",
        "stylers": [{
          color: '#ff99cc'
        }],
      }]
    })
  }

#map {
  height: 100%;
  width: 100%;
}

html,
body {
  height: 100%;
  margin:0 auto;
}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDHu4QBgWONqtdOWVLTW5XZ51B1eOU6SWw&callback=initMap" async defer></script>

<div id="map"></div>

2- 关闭水几何形状的可见性 - 它不起作用，因为default所有地图对象后面都有纯色背景。

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: 40.674,
      lng: -73.945
    },
    zoom: 12,
    styles: [{
      "featureType": "water",
      "elementType": "geometry",
      "stylers": [{
        visibility: "off"
      }],
    }]
  })
}

#map {
  height: 100%;
  width: 100%;
}

html,
body {
  height: 100%;
  margin:0 auto;
}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDHu4QBgWONqtdOWVLTW5XZ51B1eOU6SWw&callback=initMap" async defer></script>

<div id="map"></div>

您也许可以修改脚本以完全删除/更改默认背景，但这超出了我的能力范围。

到目前为止我所知道的是：

该颜色的变量（？）被调用backgroundColor，它属于google.maps.MapOptions谷歌对该变量的定义：

您可以在Google Maps JavaScript API V3 参考中了解更多相关信息

没关系...

上面的变量仅控制图块加载之前的背景颜色。我在本教程中为感兴趣的人找到了这一点。

不过……在我看来，修复涉及两个步骤：

1. 关闭水几何形状的可见性
2. 以某种方式修改/删除所有地图元素下的默认背景

我希望这能让您更接近解决问题。

最后——仅供参考——

谷歌有一个非常方便的工具来帮助设计地图样式。它消除了“正常”地图样式等式中的所有猜测。

你可以在这里尝试一下：Google 地图样式工具