如何使用谷歌地图角度分量从谷歌地图中删除地标

Question

我正在使用 google 地图角度组件，它工作得非常好！

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

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

1. 创建 json 以隐藏地图上的地标和其他特征的站点
2. 展示了如何从谷歌地图开发网站隐藏地图功能
3. 描述相同问题的链接

我在这个google文档中看到它显示了使用“setMapStyle()”将样式应用到“googlemap”，但这不是角度包中的方法

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

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 接口的 styles 属性。 像这样：

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

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

Answer 2

响应未来公共汽车的需求，criando um mapId aqui，https://console.cloud.google.com/google/maps-apis/studio/maps，crie também o estilo de mapa，onde não tem marcadores，é可以编辑不同的地图、附加地图 ID 选项、功能。

为了将来参考，请在 https://console.cloud.google.com/google/maps-apis/studio/maps 中创建地图 ID，并创建地图样式、删除标记并调整各种设置。然后，将地图ID添加到地图选项中，就可以了。