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": "几何",
“造型师”:[
{
“颜色”:“#212121”
}
]
}

我添加了 [] =

所有3条评论

任何回复

Map 组件上的style输入接受类型MapTypeStyle的对象数组,并且它确实有效,因为我以前使用过它。

请使您的示例更短,不需要所有这些样式。 解析和检查可能的错误更容易。 此外,我们需要进行复制才能调查 AGM 中可能存在的错误。 因此,我将关闭它,因为它不是问题和/或缺乏复制。

这对我有用:

样式:[] = [
{
"elementType": "几何",
“造型师”:[
{
“颜色”:“#212121”
}
]
}

我添加了 [] =

此页面是否有帮助?
0 / 5 - 0 等级

相关问题

marcelinobadin picture marcelinobadin  ·  3评论

alexweber picture alexweber  ·  4评论

supran2811 picture supran2811  ·  4评论

vamsibassetty08 picture vamsibassetty08  ·  3评论

gizm0bill picture gizm0bill  ·  4评论