Как удалить ориентиры с карты google с помощью компонента google map angular

Question

Я использую google map angular компонент , и он работает довольно хорошо!

Но теперь я хочу удалить некоторые ориентиры с карты, чтобы уменьшить ее перегруженность, чтобы иметь возможность более четко отображать свои маркеры.

Я нашел эти ресурсы ниже, но не могу понять, как применить их к пакет node, который я использую.

1. Сайт для создания json для скрытия ориентиров и других функций на карте
2. показывает, как скрыть карту функции с сайта разработчиков карт Google
3. Ссылка SO, которая описывает ту же проблему

Я вижу в этой документации Google это показывает применение стилей к 'googlemap' с 'setMapStyle ()', но это не метод в пакете angular

Вот мой компонент (не весь код), где я использую карты Google, но он показывает, как я использую весь код для карты

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

Попробуйте использовать свойство styles интерфейса MapOptions . Примерно так:

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

Это может немного раздражать при детальном оформлении. Вы можете сгенерировать набор стилей из этого Мастера стилей (у него также есть слайд Ориентиры , чтобы удалять их постепенно, а затем просто экспортировать массив стилей).