Question

我正在尝试借助https://mapstyle.withgoogle.com/（自定义Google地图样式）来自定义Google地图。

我在我的有角度的应用程序中正在使用有角度的google maps（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)">

其中styles是您在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"
            }
          ]
        }
    ]...

如何在AGM地图中添加自定义Google地图样式XML

2 个答案: