在我的应用程序上看不到自定义 Google 地图样式

Question

我根据这个文档做了谷歌地图样式：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 谷歌地图组件：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>

Answer 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