Question

我目前正在开展一些项目，需要将下一个设计实施到Google地图。

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

所以，我很喜欢 - 它是否可能（仅使用API）？

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

提前致谢！

Answer 1

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

首先，如前面的答案中所述，您必须关闭地图的可见性。您可以参考关于样式的google documentation，但代码非常简单：

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

在这里，您要在地图的mapOptions中声明您想要的，首先要关闭水+土地的可见度，然后再打开“土地的可见度”。 / p>

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>

请注意，此结果的灵感来自两个帖子。第一个是上面的答案，第二个是罗马在Stack Overflow中的地址答案。

Answer 2

注意：如果您有一个不同的答案扩展到我的，请随时复制此答案的任何部分。

据我所知，rgba颜色为no support。由于没有支持颜色格式的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 Reference中详细了解此信息~~

没关系......

上面的变量仅控制切片加载前的背景颜色。对于任何感兴趣的人，我在tutorial中找到了这个。

仍然......我看到它的方式，修复涉及两个步骤：

关闭水几何的可见性

以某种方式修改/删除所有地图元素下的默认背景

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

最后 - 这仅供参考 -
谷歌有一个非常方便的工具来帮助设计地图。对于“普通”地图样式，它需要考虑所有猜测。

您可以在此处使用它：Google map style tool

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

2 个答案: