google 地图的样式

Question

我已将地图嵌入网站，现在我想将 google 地图的颜色更改为 dark，如 google 地图中所示。我正在尝试这样做，但不知道我必须应用的给定样式在哪里我的初始化地图代码是。我想我必须改变这个

  _initMap: function() {
            var self= this, options  = this.options,
                centerPosition = new google.maps.LatLng(options.latitude, options.longitude);

            /**
             * map
             * @type {google.maps.Map}
             */
            this.map = new google.maps.Map(this.element[0], {
                zoom: parseFloat(options.zoom_level),
                center: centerPosition,
                minZoom: options.minZoom,
                maxZoom: options.maxZoom
            });

            this.storePopupTmpl = mageTemplate($(options.storePopupTemplate).html());

            /**
             * infor windopw
             * @type {google.maps.InfoWindow}
             */
            this.infowindow = new google.maps.InfoWindow({
                //maxWidth: 250,
                //disableAutoPan: true,
                maxWidth: 450,
                minWidth: 350,
            });

编辑我是按照这个做的

https://mapstyle.withgoogle.com/

Answer 1

https://mapstyle.withgoogle.com/ 只是一个工具，可以帮助您创建 JSON 您需要的地图实施样式。

您应该阅读 style reference guide。

最简单的实现如下。您导出的 JSON 样式位于 MapOptions object.

的 styles 属性中

var map;

function initialize() {

  // Map Style JSON
  var blueStyle = [{
    'featureType': 'all',
    'elementType': 'labels',
    'stylers': [{
      'visibility': 'off'
    }]
  }, {
    'featureType': 'road',
    'elementType': 'labels.icon',
    'stylers': [{
      'visibility': 'off'
    }]
  }, {
    'stylers': [{
      'hue': '#00aaff'
    }, {
      'saturation': -50
    }, {
      'gamma': 1.15
    }, {
      'lightness': 12
    }]
  }, {
    'featureType': 'road',
    'elementType': 'labels.text.fill',
    'stylers': [{
      'visibility': 'on'
    }, {
      'lightness': 24
    }]
  }, {
    'featureType': 'road',
    'elementType': 'geometry',
    'stylers': [{
      'lightness': 85
    }]
  }];

  var mapOptions = {
    center: new google.maps.LatLng(52.368465, 4.903921),
    zoom: 10,
    styles: blueStyle
  };

  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}

initialize();

#map-canvas {
  height: 200px;
}

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

<script src="https://maps.googleapis.com/maps/api/js?callback=initialize"
        async defer></script>

google 地图的样式

styling of google map

google-maps

google-maps-api-3

maps

google-maps-api-2