如何使用谷歌地图角度组件从谷歌地图中删除地标

Question

我正在使用google map angular component，它工作得很好！

但现在我想从地图中删除一些地标以减少拥堵，以便能够更清楚地显示我的标记。

我在下面找到了这些资源，但不知道如何将其应用于我正在使用的 节点包。

1. Site to create json for hiding landmarks and other features on map
2. shows how to hide map features from google map dev site
3. SO link that describes same issue

我在google documentation 中看到它显示了使用 'setMapStyle()' 将样式应用于 'googlemap' 但这不是 angular 包中的方法

下面是我使用谷歌地图的组件（不是所有代码），但它显示了我如何使用地图的所有代码

import {
  MapInfoWindow,
  MapMarker,
  GoogleMap
} from '@angular/google-maps';

export class YogabandEventsComponent implements OnInit {
  colContentRef: ElementRef;
  @ViewChild(GoogleMap, {
    static: false
  }) googleMap: GoogleMap;
  @ViewChild(MapInfoWindow, {
    static: false
  }) infoWindow: MapInfoWindow;

  zoom = 12;
  center: google.maps.LatLngLiteral;
  options: google.maps.MapOptions = {
    mapTypeId: 'roadmap',
    mapTypeControl: false,
    scrollwheel: true,
    maxZoom: 18,
    minZoom: 10,
    streetViewControl: false,
    fullscreenControl: false
  };

  markers: Marker[];
  infoContent = '';

  constructor(...) { ...
  }

  openInfo(marker: MapMarker, content) {
    this.infoContent = content;
    this.infoWindow.open(marker);
  }

  showMarkers() {
    this.markers = [];
    for (const ybEvent of this.yogabandEvents) {
      const marker = new Marker();
      marker.info = ybEvent.name;
      marker.title = ybEvent.name;
      marker.position = {
        lat: ybEvent.latitude,
        lng: ybEvent.longitude
      };
      marker.label = {
        color: '#17a2b8',
        text: ybEvent.yogaType,
        fontWeight: 'bold',
        fontSize: '16px'
      };
      marker.options = {
        icon: {
          // scaledSize: new google.maps.Size(40, 40),
          url: 'assets/images/marker.svg',
          labelOrigin: new google.maps.Point(18, 50)
        }
      };
      this.markers.push(marker);
    }
  }

}

<div class="col flex-fill h-100 px-0 right-col">
  <google-map [options]="options" [zoom]="zoom" [center]="center" class="h-100" height="100%" width="100%">
    <map-marker #markerElem *ngFor="let marker of markers" [position]="marker.position" [label]="marker.label" [title]="marker.title" [options]="marker.options" (mapClick)="openInfo(markerElem, marker.info)">
    </map-marker>
    <map-info-window>{{ infoContent }}</map-info-window>
  </google-map>
</div>

Answer 1

尝试使用MapOptions interface 的styles 属性。 像这样：

options: google.maps.MapOptions = {
    mapTypeId: 'roadmap',
    mapTypeControl: false,
    scrollwheel: true,
    maxZoom: 18,
    minZoom: 10,
    streetViewControl: false,
    fullscreenControl: false,
    styles: [...]
  };

详细的样式可能会有点烦人。您可以从 Styling Wizard 生成一组样式（它还有一个 Landmarks 幻灯片可以逐渐删除它们，然后只需导出样式数组）。