Hinzufügen von Stil zu Angular2 Google Maps

Question

Hallo Ich bin neu in Angular2/Typescript und ich versuche, eine Karte, die ich zu meinem Angular2-Projekt mit dem Angular2 Google Maps Components hinzugefügt habe, aber ich kann nicht herausfinden, wie man es noch nicht dokumentiert verwenden MapTypeStyle Interface. Wie benutze ich es in meinem Modul und dem HTML? Das Kartenmodul funktioniert, aber ich kann die Stile nicht anwenden. Jede Hilfe wird geschätzt.

Die nach 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> 

Modul (Auszug)

export class GmapComponent implements OnInit { 

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

    ngOnInit() { 
    } 
} 

Answer 1

Die Ärzte sind nicht sehr hilfreich, so dass ich für die Komponente in den Code graben .

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

Nur styles sollte das Hinzufügen arbeiten, wo styles vom Typ MapTypeStyle[] die declared here ist.

Versuchen styles als so etwas wie definieren:

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

Das sollte machen Ihr Wasser rot, aber ich diese selbst noch nicht getestet, ich bin stützen sie einfach den Code aus.

Answer 2

Meine letzte Arbeitslösung. Aber ich verstehe immer noch nicht wo und wie MapTypeStyle Interface verwendet wird.

html Hinzufügen [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> 

Komponente (Auszug) Zugabe 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

Das ist für mich arbeitet. What :-p

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