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

Question

我已根据此文档完成 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>

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

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

Cannot see custom Google Map style on my app

google-maps

styling

typescript

ionic-framework

angular