如何用angular改变google地图的陆地和水的颜色？

Question

我正在为 google 地图 https://angular-maps.com/api-docs/agm-core 使用此 angular 组件。我发誓有一天我以为我看到你可以改变水的颜色，并以此着陆。但是当我查看文档时，我没有看到。是否可以使用此 angular 模块更改 google 地图上陆地和水域的颜色？如果是这样怎么办？

谢谢！

Answer 1

Google 地图 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 密钥）

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

如何用angular改变google地图的陆地和水的颜色？

How to change the color of land, and water of google maps with angular?

angular

google-maps

angular-google-maps