將風格添加到Angular2 Google地圖

Question

嗨我是Angular2/Typescript的新手，我嘗試使用Angular2 Google Maps Components添加到我的Angular2項目中，但我無法弄清楚如何使用尚未記錄的地圖MapTypeStyle Interface。我如何在我的模塊和html中使用它？地圖模塊的工作原理，但我沒有得到應用的樣式。任何幫助讚賞。

的根據Google MapsTypeStyle Reference

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[]這是declared here的。

嘗試定義styles，就像這樣：

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

這應該讓你的水紅色，但我還沒有測試此我自己呢，我只是立足它關閉的代碼。

Answer 2

我最終的工作解決方案。但我仍然不明白MapTypeStyle接口在哪裏以及如何使用。

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

} 

Answer 3

這是爲我工作[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> 

組件（節選）。 ☺:-p

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