如何在 agm-map 中添加自定义 google 地图样式 xml

Question

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

我在我的 angular 应用程序中使用 angular google 地图 (https://github.com/SebastianM/angular-google-maps) 库。

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

请帮帮我。

Answer 1

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

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

其中样式是您在 https://mapstyle.withgoogle.com/

中下载的 json

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

Answer 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"
            }
          ]
        }
    ]...

Answer 3

要在 Angular13 中完成这项工作，您必须将样式推送到数组中键入 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"
    }
  ]
}

]

如何在 agm-map 中添加自定义 google 地图样式 xml

How to add custom google maps styling xml in agm-map

angular-google-maps

angular