能否在Google地图中使用图像或CSS渐变来填充水域？

Question

我目前正在进行一些项目，并需要将下一个设计实施到Google地图中。

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

所以，我想知道 - 是否有可能（只使用API）？

还是需要某些黑客技巧？例如，我考虑让水域透明，并将点状图像放在地图后面。

提前致谢！

- Dan Dev

Answer 1

在这篇答案中，我将介绍如何关闭地图上水域几何体的可见性以及设置地图背景颜色。首先，如前面的答案所述，您需要关闭地图的可见性。您可以查看谷歌文档了解样式器，但代码非常简单。

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

在地图的mapOptions中，您需要声明您希望首先关闭水域和陆地的可见性，其次打开陆地的可见性。请注意保留HTML标签。

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

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

---

第二步，你需要移除地图的默认背景颜色（灰色）。这个问题已经在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);

一个简单的例子：

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>

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

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

.gradient {
    height: 200px;
    background: -webkit-repeating-linear-gradient(white, blue); /* For Safari 5.1 to 6.0 */
    background: -o-repeating-linear-gradient(white, blue); /* For Opera 11.1 to 12.0 */
    background: -moz-repeating-linear-gradient(white, blue); /* For Firefox 3.6 to 15 */
    background: repeating-linear-gradient(white, blue); /* Standard syntax (must be last) */
}

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

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

- SphynxTech

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- 关闭水体几何的可见性 - 由于所有地图对象都有一个默认的实心颜色背景，因此它不起作用。

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对该变量的定义如下： 您可以在Google Maps JavaScript API V3参考文档中了解更多信息。 算了吧…… 上面的变量仅控制瓷砖加载前的背景颜色。我在本教程中发现了这一点，供有兴趣的人参考。

不过，我认为修复需要两个步骤：

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

希望这能让您更接近修复工作。

---

最后，仅供参考，Google提供了一个非常方便的工具来帮助样式化地图。对于“普通”地图样式，它消除了所有猜测。

您可以在此处玩耍： Google地图样式工具

- I haz kode