angular - 在我的應用程式中無法看到自訂的 Google 地圖樣式

我已經根據這份文件進行了 Google 地圖樣式設計：https://developers.google.com/maps/documentation/javascript/styling

我在這裡使用了雲端工具。我使用了可用的範本。即沒有這裡的 JSON 樣式。

index.html

<script
    src="https://maps.googleapis.com/maps/api/js?key=mykey&map_ids=mapidhere">
    </script>

我在這裡使用 Angular Google 地圖元件：https://github.com/angular/components/blob/master/src/google-maps/README.md

但是我在那裡沒有做任何與自訂樣式相關的事情。我也重啟了應用程式並清除了快取。但是地圖樣式還是沒有出現？我也已經發佈了更改。有什麼線索為什麼會出現這種情況嗎？

component.html

<google-map [options]="locationModel?.googleMap?.mapOptions" height="104%" width="100%">

  <map-marker #marker="mapMarker" *ngFor="let storeMarkerPosition of locationModel?.googleMap?.storeMarkerPositions"
    [position]="storeMarkerPosition.markerPosition" [options]="locationModel?.googleMap?.markerOptions"
    (mapClick)="openInfoCard(marker,storeMarkerPosition.store)">

  </map-marker>

  <map-info-window>
    <app-location-details *ngIf="store" [storeModel]="store"></app-location-details>
  </map-info-window>

</google-map>

答案＃1

我記得這個 :)
你需要像這樣擴展 google.maps.MapOptions 介面：

export interface MapConfiguration extends google.maps.MapOptions {
  /*
   * `mapId` not yet available in the google.maps.MapOptions type definition
   * See https://developers.google.com/maps/documentation/javascript/using-typescript
   */
  readonly mapId?: string;
}

然後將你的介面用作初始化物件的 type

希望有效！

編輯 1：你也可以使用 as 關鍵字告訴 TSC「嘿，這是一個有效的 google.maps.MapOptions 物件」，但我更喜歡使用強類型

{ 
  zoomControl: true,
  disableDefaultUI: true, 
  mapId: '1234' 
} as google.maps.MapOptions

答案＃2

現在，mapId 在選項物件中受到支援：

// google-map.component.html
<google-map [options]="options"></google-map>

// google-map.component.ts
options: google.maps.MapOptions = {
  center: {lat: 40, lng: -20},
  zoom: 4,
  mapId: 'abcdef...'
};