有什么方法可以将agm-map主题更改为暗模式或街景视图？

Question

我正在尝试将角度贴图主题更改为黑暗，但无法完成。请帮助。 我的代码：

<agm-map [latitude]="latitude" [longitude]="longitude"[zoom]="zoom"[class.dark-theme]="isDark" >

map.component.ts：

isDark = true;

Answer 1

You can add主题正在执行：

<agm-map [latitude]="latitude" [longitude]="longitude"[zoom]="zoom" [styles]="customTheme">

Answer 2

<agm-map [latitude]="lat" [longitude]="lng"  [styles]="mapStyle === 'dark' ? styleDark : styleLight">
    .
    .
    .
</agm-map>

在ts中，您将有逻辑来切换样式，或者可以设置默认样式

 public darkStyle = [
        {
          "elementType": "geometry",
          "stylers": [
            {
              "hue": "#ff4400"
            },
            {
              "saturation": -100
            },
            {
              "lightness": -4
            },
            {
              "gamma": 0.72
            }
          ]
        },
        {
          "featureType": "road",
          "elementType": "labels.icon"
        },
        {
          "featureType": "landscape.man_made",
          "elementType": "geometry",
          "stylers": [
            {
              "hue": "#0077ff"
            },
            {
              "gamma": 3.1
            }
          ]
        },
        {
          "featureType": "water",
          "stylers": [
            {
              "hue": "#000000"
            },
            {
              "gamma": 0.44
            },
            {
              "saturation": -33
            }
          ]
        },
        {
          "featureType": "poi.park",
          "stylers": [
            {
              "hue": "#44ff00"
            },
            {
              "saturation": -23
            }
          ]
        },
        {
          "featureType": "water",
          "elementType": "labels.text.fill",
          "stylers": [
            {
              "hue": "#007fff"
            },
            {
              "gamma": 0.77
            },
            {
              "saturation": 65
            },
            {
              "lightness": 99
            }
          ]
        },
        {
          "featureType": "water",
          "elementType": "labels.text.stroke",
          "stylers": [
            {
              "gamma": 0.11
            },
            {
              "weight": 5.6
            },
            {
              "saturation": 99
            },
            {
              "hue": "#0091ff"
            },
            {
              "lightness": -86
            }
          ]
        },
        {
          "featureType": "transit.line",
          "elementType": "geometry",
          "stylers": [
            {
              "lightness": -48
            },
            {
              "hue": "#ff5e00"
            },
            {
              "gamma": 1.2
            },
            {
              "saturation": -23
            }
          ]
        },
        {
          "featureType": "transit",
          "elementType": "labels.text.stroke",
          "stylers": [
            {
              "saturation": -64
            },
            {
              "hue": "#ff9100"
            },
            {
              "lightness": 16
            },
            {
              "gamma": 0.47
            },
            {
              "weight": 2.7
            }
          ]
        },
        {
          "featureType": "water",
          "elementType": "geometry",
          "stylers": [
            {
              "color": "#222222"
            }
          ]
        },
      ];

      public defaultStyle = [];