Angular-google-maps: AGMにテーマを追加する方法

作成日 2018年02月17日  ·  3コメント  ·  ソース: SebastianM/angular-google-maps

AGMにカスタムスタイルを追加する方法
私はこれが好きでした
TSファイル内

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": "geometry"、
「スタイラー」:[
{{
「色」:「#212121」
}
]
}

[] =を追加しました

全てのコメント3件

返信

Mapコンポーネントのstyle入力は、タイプMapTypeStyleのオブジェクトの配列を受け入れます。これは、以前に使用したことがあるので、確かに機能します。

例を短くしてください。これらすべてのスタイルは必要ありません。 考えられるエラーを解析してチェックする方が簡単です。 また、AGMで発生する可能性のあるバグを調査できるようにするには、複製が必要です。 したがって、これは問題ではない、および/または複製が不足しているため、これを閉じます。

これは私のために働いた:

スタイル:[] = [
{{
"elementType": "geometry"、
「スタイラー」:[
{{
「色」:「#212121」
}
]
}

[] =を追加しました

このページは役に立ちましたか?
0 / 5 - 0 評価

関連する問題

DeveloperAdd007 picture DeveloperAdd007  ·  3コメント

PeterSisovsky picture PeterSisovsky  ·  3コメント

alexweber picture alexweber  ·  4コメント

Halynsky picture Halynsky  ·  3コメント

supran2811 picture supran2811  ·  4コメント