Добавление стиля в Angular2 Карты Google

Question

Привет Я новичок в Angular2/Typcript, и я пытаюсь создать карту, которую я добавил в мой проект Angular2, используя Angular2 Google Maps Components, но я не могу понять, как использовать его еще не документально 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 добавления [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() { 
    } 

} 

Answer 3

Это работает для меня. ☺ :-p

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