如何在 agm-map 中添加自定义谷歌地图样式 xml答案

【问题标题】：How to add custom google maps styling xml in agm-map如何在 agm-map 中添加自定义谷歌地图样式 xml
【发布时间】：2018-11-30 14:32:46
【问题描述】：

我正在尝试在 https://mapstyle.withgoogle.com/ 的帮助下自定义谷歌地图，自定义谷歌地图样式。

我在我的角度应用程序中使用角度谷歌地图（https://github.com/SebastianM/angular-google-maps）库。

我想包含 XML，以便以自定义样式显示 agm-map。但我不知道如何在 agm-map 中做到这一点。

请帮帮我。

【问题讨论】：

标签： angular angular-google-maps

【解决方案1】：

您必须在初始化地图时提供样式指令：

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

styles 是你在https://mapstyle.withgoogle.com/下载的json

这是我创建的一个简单示例：https://stackblitz.com/edit/angular-google-maps-demo-mgxqnr?file=app/app.component.ts

【讨论】：

应该是数组吧？如果我们想要 json 文件并制作样式以映射到这个 json 怎么办？
样式不适用，我收到以下“警告：清理不安全的样式值”已尝试清理但仍然不起作用。
这似乎不再起作用了。试了一下版本1.0.0-beta.7

【解决方案2】：

Apply JSON style in AGM Google Maps Angular.

 **HTML**

    <agm-map 
    [latitude]="latitude" 
    [longitude]="longitude" 
    [zoomControl]="false"
    **[styles]="styles">**
    </agm-map>

**TS**
    import { FormControl } from "@angular/forms";
    import { MapsAPILoader, LatLngLiteral } from "@agm/core";
    c

    export class DriverPage implements OnInit {

    //Style Map
    **styles= **.JSON (Paste the Json from https://mapstyle.withgoogle.com )**
     [
        {
          "elementType": "geometry",
          "stylers": [
            {
              "color": "#ebe3cd"
            }
          ]
        }
    ]...

【讨论】：

【解决方案3】：

要在 Angular 13 中完成这项工作，您必须将样式推送到数组中输入 MapTypeStyle[] 以便地图采用样式，然后它将起作用

 JSON_MAP_STYLES = [
{
  "elementType": "geometry",
  "stylers": [
    {
      "color": "#f5f5f5"
    }
  ]
},
{
  "elementType": "labels.icon",
  "stylers": [
    {
      "visibility": "off"
    }
  ]
},
{
  "elementType": "labels.text.fill",
  "stylers": [
    {
      "color": "#616161"
    }
  ]
},
{
  "elementType": "labels.text.stroke",
  "stylers": [
    {
      "color": "#f5f5f5"
    }
  ]
},
{
  "featureType": "administrative.land_parcel",
  "elementType": "labels.text.fill",
  "stylers": [
    {
      "color": "#bdbdbd"
    }
  ]
},
{
  "featureType": "poi",
  "elementType": "geometry",
  "stylers": [
    {
      "color": "#eeeeee"
    }
  ]
},
{
  "featureType": "poi",
  "elementType": "labels.text.fill",
  "stylers": [
    {
      "color": "#757575"
    }
  ]
},
{
  "featureType": "poi.business",
  "stylers": [
    {
      "visibility": "off"
    }
  ]
},
{
  "featureType": "poi.park",
  "elementType": "geometry",
  "stylers": [
    {
      "color": "#e5e5e5"
    }
  ]
},
{
  "featureType": "poi.park",
  "elementType": "labels.text",
  "stylers": [
    {
      "visibility": "off"
    }
  ]
},
{
  "featureType": "poi.park",
  "elementType": "labels.text.fill",
  "stylers": [
    {
      "color": "#9e9e9e"
    }
  ]
},
{
  "featureType": "road",
  "elementType": "geometry",
  "stylers": [
    {
      "color": "#ffffff"
    }
  ]
},
{
  "featureType": "road.arterial",
  "elementType": "labels.text.fill",
  "stylers": [
    {
      "color": "#757575"
    }
  ]
},
{
  "featureType": "road.highway",
  "elementType": "geometry",
  "stylers": [
    {
      "color": "#dadada"
    }
  ]
},
{
  "featureType": "road.highway",
  "elementType": "labels.text.fill",
  "stylers": [
    {
      "color": "#616161"
    }
  ]
},
{
  "featureType": "road.local",
  "elementType": "labels.text.fill",
  "stylers": [
    {
      "color": "#9e9e9e"
    }
  ]
},
{
  "featureType": "transit.line",
  "elementType": "geometry",
  "stylers": [
    {
      "color": "#e5e5e5"
    }
  ]
},
{
  "featureType": "transit.station",
  "elementType": "geometry",
  "stylers": [
    {
      "color": "#eeeeee"
    }
  ]
},
{
  "featureType": "water",
  "elementType": "geometry",
  "stylers": [
    {
      "color": "#c9c9c9"
    }
  ]
},
{
  "featureType": "water",
  "elementType": "labels.text.fill",
  "stylers": [
    {
      "color": "#9e9e9e"
    }
  ]
}

]

【讨论】：