Angular-google-maps: So fügen Sie ein Thema in der Hauptversammlung hinzu

Erstellt am 17. Feb. 2018  ·  3Kommentare  ·  Quelle: SebastianM/angular-google-maps

So fügen Sie der Hauptversammlung ein benutzerdefiniertes Design hinzu
Früher mochte ich das
in TS-Datei

markers: any[] = [
    {
      lat: 51.673858,
      lng: 7.815982,
      label: 'A',
      draggable: true
    },
    {
      lat: 51.373858,
      lng: 7.215982,
      label: 'B',
      draggable: false
    },
    {
      lat: 51.323858,
      lng: 7.255982,
      label: 'D',
      draggable: false
    },
    {
      lat: 51.293858,
      lng: 7.285982,
      label: 'E',
      draggable: false
    },
    {
      lat: 51.353858,
      lng: 7.305982,
      label: 'F',
      draggable: false
    },
    {
      lat: 51.723858,
      lng: 7.895982,
      label: 'C',
      draggable: true
    }
  ]



  styles: [
    {elementType: 'geometry', stylers: [{color: '#242f3e'}]},
    {elementType: 'labels.text.stroke', stylers: [{color: '#242f3e'}]},
    {elementType: 'labels.text.fill', stylers: [{color: '#746855'}]},
    {
      featureType: 'administrative.locality',
      elementType: 'labels.text.fill',
      stylers: [{color: '#d59563'}]
    },
    {
      featureType: 'poi',
      elementType: 'labels.text.fill',
      stylers: [{color: '#d59563'}]
    },
    {
      featureType: 'poi.park',
      elementType: 'geometry',
      stylers: [{color: '#263c3f'}]
    },
    {
      featureType: 'poi.park',
      elementType: 'labels.text.fill',
      stylers: [{color: '#6b9a76'}]
    },
    {
      featureType: 'road',
      elementType: 'geometry',
      stylers: [{color: '#38414e'}]
    },
    {
      featureType: 'road',
      elementType: 'geometry.stroke',
      stylers: [{color: '#212a37'}]
    },
    {
      featureType: 'road',
      elementType: 'labels.text.fill',
      stylers: [{color: '#9ca5b3'}]
    },
    {
      featureType: 'road.highway',
      elementType: 'geometry',
      stylers: [{color: '#746855'}]
    },
    {
      featureType: 'road.highway',
      elementType: 'geometry.stroke',
      stylers: [{color: '#1f2835'}]
    },
    {
      featureType: 'road.highway',
      elementType: 'labels.text.fill',
      stylers: [{color: '#f3d19c'}]
    },
    {
      featureType: 'transit',
      elementType: 'geometry',
      stylers: [{color: '#2f3948'}]
    },
    {
      featureType: 'transit.station',
      elementType: 'labels.text.fill',
      stylers: [{color: '#d59563'}]
    },
    {
      featureType: 'water',
      elementType: 'geometry',
      stylers: [{color: '#17263c'}]
    },
    {
      featureType: 'water',
      elementType: 'labels.text.fill',
      stylers: [{color: '#515c6d'}]
    },
    {
      featureType: 'water',
      elementType: 'labels.text.stroke',
      stylers: [{color: '#17263c'}]
    }
  ]

Und in der Vorlage so

<agm-map style="height: 300px" [latitude]="51.673858" [longitude]="7.815982" [styles]="styles">
  <agm-marker-cluster imagePath="https://raw.githubusercontent.com/googlemaps/v3-utility-library/master/markerclustererplus/images/m">

    <agm-marker *ngFor="let m of markers; let i = index"
      [latitude]="m.lat"
      [longitude]="m.lng"
      [label]="m.label">
    </agm-marker><!-- multiple markers -->

  </agm-marker-cluster>
</agm-map>

aber das Kartendesign funktioniert nicht. Können Sie mir helfen, damit ich verschiedene Stilkarten von https://mapstyle.withgoogle.com/ verwenden kann?

Hilfreichster Kommentar

Das hat bei mir funktioniert:

Stile: [] = [
{
"elementType": "Geometrie",
"Styler": [
{
"Farbe": "#212121"
}
]
}

Ich habe [] = hinzugefügt

Alle 3 Kommentare

Jegliche Antwort

Die Eingabe style in der Map-Komponente akzeptiert ein Array von Objekten des Typs MapTypeStyle , und es funktioniert auf jeden Fall, da ich es zuvor verwendet habe.

Bitte machen Sie Ihre Beispiele kürzer, es sind nicht alle diese Stile erforderlich. Es ist einfacher zu analysieren und auf mögliche Fehler zu prüfen. Außerdem ist eine Reproduktion erforderlich, damit wir einen möglichen Fehler in AGM untersuchen können. Daher werde ich dies schließen, da es kein Problem ist und / oder keine Reproduktion vorliegt.

Das hat bei mir funktioniert:

Stile: [] = [
{
"elementType": "Geometrie",
"Styler": [
{
"Farbe": "#212121"
}
]
}

Ich habe [] = hinzugefügt

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen