Question

这是我的自定义标记谷歌地图的代码。

    <script>
  var map;
  function initialize() {
    map = new google.maps.Map(document.getElementById('map'), {
      zoom: 17,
      scrollwheel: false,
      center: new google.maps.LatLng(40.6328215, 22.9468210), //* Add here your coordinates, here is where the map will center *//
      mapTypeId: google.maps.MapTypeId.SATELLITE,
  disableDefaultUI: true
    });
    var icons = {
      Church: {
        name: 'Church',
        icon: 'images/map/pin.png'  //* Add here the Church Pin *//
      }
    };
    function addMarker(location) {
      var marker = new google.maps.Marker({
        position: location.position,
        icon: icons[location.type].icon,
        map: map
      });
    }
    var locations = [
      {
        position: new google.maps.LatLng(40.6328215, 22.9468210),  //* Add here the Church coordinates *//
        type: 'Church'
      }
    ];
    for (var i = 0, location; location = locations[i]; i++) {
      addMarker(location);
    }
  }
  google.maps.event.addDomListener(window, 'load', initialize);
</script>

如何在此代码中添加样式，以便地图的颜色变为黑白？

我知道我需要添加以下内容：

    stylers: [
    {saturation: '-100'}
]

我只是不知道该怎么做！有人可以告诉你怎么做吗？

谢谢大家！

Answer 1

网上有几个样本，你可以找到一个集合

https://snazzymaps.com/explore?color=white

这是sample greyscale

[
    {
        "featureType": "landscape",
        "stylers": [
            {
                "saturation": -100
            },
            {
                "lightness": 65
            },
            {
                "visibility": "on"
            }
        ]
    },
    {
        "featureType": "poi",
        "stylers": [
            {
                "saturation": -100
            },
            {
                "lightness": 51
            },
            {
                "visibility": "simplified"
            }
        ]
    },
    {
        "featureType": "road.highway",
        "stylers": [
            {
                "saturation": -100
            },
            {
                "visibility": "simplified"
            }
        ]
    },
    {
        "featureType": "road.arterial",
        "stylers": [
            {
                "saturation": -100
            },
            {
                "lightness": 30
            },
            {
                "visibility": "on"
            }
        ]
    },
    {
        "featureType": "road.local",
        "stylers": [
            {
                "saturation": -100
            },
            {
                "lightness": 40
            },
            {
                "visibility": "on"
            }
        ]
    },
    {
        "featureType": "transit",
        "stylers": [
            {
                "saturation": -100
            },
            {
                "visibility": "simplified"
            }
        ]
    },
    {
        "featureType": "administrative.province",
        "stylers": [
            {
                "visibility": "off"
            }
        ]
    },
    {
        "featureType": "water",
        "elementType": "labels",
        "stylers": [
            {
                "visibility": "on"
            },
            {
                "lightness": -25
            },
            {
                "saturation": -100
            }
        ]
    },
    {
        "featureType": "water",
        "elementType": "geometry",
        "stylers": [
            {
                "hue": "#ffff00"
            },
            {
                "lightness": -25
            },
            {
                "saturation": -97
            }
        ]
    }
]

制作谷歌地图monochrom

1 个答案: