Angular-google-maps: Как Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ‚Π΅ΠΌΡƒ Π² AGM

Π‘ΠΎΠ·Π΄Π°Π½Π½Ρ‹ΠΉ Π½Π° 17 Ρ„Π΅Π²Ρ€. 2018  Β·  3ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ  Β·  Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ: SebastianM/angular-google-maps

Как Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ ΡΡ‚ΠΈΠ»ΡŒ Π² AGM
ΠΌΠ½Π΅ это Π½Ρ€Π°Π²ΠΈΠ»ΠΎΡΡŒ
Π² Ρ„Π°ΠΉΠ»Π΅ Π’Π‘

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

И Π² Ρ‚Π°ΠΊΠΎΠΌ шаблонС

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

Π½ΠΎ Ρ‚Π΅ΠΌΠ°Ρ‚ΠΈΠΊΠ° ΠΊΠ°Ρ€Ρ‚Ρ‹ Π½Π΅ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚. ΠœΠΎΠΆΠ΅Ρ‚Π΅ Π»ΠΈ Π²Ρ‹ ΠΏΠΎΠΌΠΎΡ‡ΡŒ ΠΌΠ½Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ я ΠΌΠΎΠ³ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ€Π°Π·Π½Ρ‹Π΅ ΠΊΠ°Ρ€Ρ‚Ρ‹ стилСй с https://mapstyle.withgoogle.com/

Π‘Π°ΠΌΡ‹ΠΉ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ΠΉ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

Π­Ρ‚ΠΎ сработало для мСня:

стили: [] = [
{
"elementType": "гСомСтрия",
"стайлСр": [
{
"Ρ†Π²Π΅Ρ‚": "#212121"
}
]
}

я добавил [] =

ВсС 3 ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

Π›ΡŽΠ±ΠΎΠΉ ΠΎΡ‚Π²Π΅Ρ‚

Π’Π²ΠΎΠ΄ style ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° Map ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Π΅Ρ‚ массив ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠ² Ρ‚ΠΈΠΏΠ° MapTypeStyle , ΠΈ ΠΎΠ½ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ я использовал Π΅Π³ΠΎ Ρ€Π°Π½ΡŒΡˆΠ΅.

ΠŸΠΎΠΆΠ°Π»ΡƒΠΉΡΡ‚Π°, Π΄Π΅Π»Π°ΠΉΡ‚Π΅ ваши ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ ΠΊΠΎΡ€ΠΎΡ‡Π΅, всС эти стили Π½Π΅ Π½ΡƒΠΆΠ½Ρ‹. Π›Π΅Π³Ρ‡Π΅ Ρ€Π°Π·ΠΎΠ±Ρ€Π°Ρ‚ΡŒ ΠΈ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΈΡ‚ΡŒ Π½Π° Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹Π΅ ошибки. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, Π½Π°ΠΌ трСбуСтся рСпродукция, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΌΡ‹ ΠΌΠΎΠ³Π»ΠΈ ΠΈΡΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚ΡŒ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΡƒΡŽ ΠΎΡˆΠΈΠ±ΠΊΡƒ Π² AGM. Π‘Π»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ, я Π·Π°ΠΊΡ€ΠΎΡŽ это, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ это Π½Π΅ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ° ΠΈ / ΠΈΠ»ΠΈ отсутствиС воспроизвСдСния.

Π­Ρ‚ΠΎ сработало для мСня:

стили: [] = [
{
"elementType": "гСомСтрия",
"стайлСр": [
{
"Ρ†Π²Π΅Ρ‚": "#212121"
}
]
}

я добавил [] =

Π‘Ρ‹Π»Π° Π»ΠΈ эта страница ΠΏΠΎΠ»Π΅Π·Π½ΠΎΠΉ?
0 / 5 - 0 Ρ€Π΅ΠΉΡ‚ΠΈΠ½Π³ΠΈ