如何使用 google 地图 angular 组件从 google 地图中删除地标

Question

我正在使用 google map angular component，它运行良好！

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

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

我在这个 google documentation 中看到它显示了使用 'setMapStyle()' 将样式应用于 'googlemap' 但这不是 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 property of the MapOptions interface。像这样：

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

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

如何使用 google 地图 angular 组件从 google 地图中删除地标

How to remove landmarks from google map with google map angular component

javascript

google-maps

google-maps-api-3

angular