给Angular2 Google Maps添加样式

Question

你好，我刚接触Angular2/Typescript，并尝试使用Angular2谷歌地图组件为我的Angular2项目添加地图样式，但我无法弄清楚如何使用尚未记录的MapTypeStyle接口。我该如何在模块和HTML中使用它？虽然地图模块可以工作，但我无法应用样式。感谢任何帮助。

相应的Google MapsTypeStyle参考文献

HTML：

<sebm-google-map [latitude]="lat" [longitude]="lng">
  <sebm-google-map-marker [latitude]="lat" [longitude]="lng"></sebm-google-map-marker>
</sebm-google-map>

模块（节选）

export class GmapComponent implements OnInit {

  title: string = 'Current Location';
  lat: number = 50.937531;
  lng: number = 6.960278600000038;
  constructor() { }

  ngOnInit() {
  }
}

- Carsten H

---

你想应用哪些样式？入门指南只是说在组件声明中使用styleUrls: ['app.component.css']。你的示例没有提供有关你要应用的样式的详细信息。 - Adam

在组件的 CSS 中，我只会为组件本身添加样式，例如地图的宽度和高度。我想要实现的是应用 JSON 格式的样式，例如来自 https://mapstyle.withgoogle.com/，根据我的理解，这需要通过 API 添加。 - Carsten H

Answer 1

文档并不是很有用，因此我必须深入组件代码进行挖掘。

<sebm-google-map [latitude]="lat" [longitude]="lng" [styles]="styles">
  <sebm-google-map-marker [latitude]="lat" [longitude]="lng"></sebm-google-map-marker>
</sebm-google-map>

只需添加样式即可，其中styles是MapTypeStyle[]类型的，在此声明。尝试将styles定义为类似以下内容的东西：

let styles = [{
  "featureType": "water",
  "stylers": [{
      "color": "#ff0000"
    }]
}];

这应该会让你的水变成红色，但我还没有亲自测试过，只是根据代码推断出来的。

- Adam

---

你好，我想改变标签测试的颜色，这可能吗？ - Sandip Solanki

Answer 2

这对我有效。☺ :-p

<sebm-google-map *ngIf="map" [latitude]="placeLat" [longitude]="placeLng" [scrollwheel]="false" [zoom]="zoom" [disableDefaultUI]="true" [styles]='[
            {
                elementType : "labels.icon",
                stylers : [{
                  visibility : "off"
                }]
            }]'>

- saddam

---

请添加一些信息，说明您进行了哪些更改，出现了什么错误以及您是如何解决的。仅仅发布修复后的代码并没有帮助任何人，因为同样的错误可能会再次发生... - Fabian S.

当我使用[styles]="styles"并将JSON数据传递到变量'styles'中时，它不起作用，然后我直接在JSON中传递了数据。 - saddam

Answer 3

我的最终工作解决方案。但我仍然不明白MapTypeStyle接口在哪里和如何使用。

HTML添加[styles]="customStyle"。

<sebm-google-map [latitude]="lat" [longitude]="lng" [styles]="customStyle" >
  <sebm-google-map-marker [latitude]="lat" [longitude]="lng" ></sebm-google-map-marker>
</sebm-google-map>

组件（节选）添加public customStyle = [{ "在此处输入JSON样式声明" }]

export class GmapComponent implements OnInit {

  public customStyle = [
    {
      "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": "#00ccff"
        },
        {
          "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
        }
      ]
    }
  ];



  title: string = 'Current Location';
  lat: number = 50.937531;
  lng: number = 6.960278600000038;

  constructor() {

  }

  ngOnInit() {
  }

}

- Carsten H

---

自定义样式是MapTypeStyle类型。如果您在文档顶部添加import { MapTypeStyle } from 'angular2-google-maps;，则可以将行public customStyle = [更改为public customStyle: MapTypeStyle = [，以确保自定义样式是正确的类型。但这不是必要的，因为它对您起作用。 - Adam