如何用角度改变谷歌地图的土地和水的颜色？答案

【问题标题】：How to change the color of land, and water of google maps with angular?如何用角度改变谷歌地图的土地和水的颜色？
【发布时间】：2017-11-27 21:37:40
【问题描述】：

我将这个角度组件用于谷歌地图https://angular-maps.com/api-docs/agm-core。我发誓有一天我以为我看到了你可以改变水的颜色，然后用它登陆。但是当我查看文档时，我没有看到。是否可以使用此角度模块更改谷歌地图上的土地和水的颜色？如果有怎么办？

谢谢！

【问题讨论】：

标签： angular google-maps angular-google-maps

【解决方案1】：

Google Maps Javascript API 在how to style your map 上有文档。

Agm 也显示相同的 styles 属性。你可以在他们的documentation中找到它

因此，根据您实例化 agm 映射的方式，您所要做的就是将具有自定义样式设置的数组传递给您的 agm 映射组件。

使用 plunker agm 演示作为基础，如果创建自定义组件，只需在组件的 template 中添加 [styles]= "styles"，如下所示：

<sebm-google-map 
  [latitude]="lat"
  [longitude]="lng"
  [zoom]="zoom"
  [disableDefaultUI]="false"
  [zoomControl]="false"
  (mapClick)="mapClicked($event)"
  [styles]= "styles">

然后像这样声明您的 styles 数组：

styles: any[] = [
  {elementType: 'geometry', stylers: [{color: '#242f3e'}]},
  {elementType: 'labels.text.stroke', stylers: [{color: '#242f3e'}]},
  {elementType: 'labels.text.fill', stylers: [{color: '#746855'}]},
]

查看实际的 plunker here（只需在 @NgModule 设置中插入您自己的 API 密钥）

您甚至可以传递动态地图样式。看到这个related SO

【讨论】：