Question

我已将我的地图嵌入网站，现在我想将谷歌地图的颜色更改为dark，如谷歌地图中所示。我试图这样做，但不知道在哪里给我的样式我必须申请我的init map代码是。我想我必须改变这个

  _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属性中。

＆＃13;

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

＆＃13;

#map-canvas {
  height: 200px;
}

＆＃13;

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

＆＃13;

谷歌地图的样式

1 个答案: