向Angular2 Google Maps添加樣式

Question

嗨，我是Angular2 / Typescript的新手，我正在嘗試使用Angular2 Google Maps Components添加到我的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() {
  }
}

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 ，其中styles的類型為MapTypeStyle[] ， 此處聲明 。

嘗試將styles定義為：

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

這應該讓你的水變紅，但我還沒有自己測試過，我只是把它從代碼中解脫出來。

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"
                }]
            }]'>

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 style declaration goes here" }]

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() {
  }

}