如何使用谷歌 map angular 组件从谷歌 map 中删除地标

Question

我正在使用谷歌 map angular 组件，它工作得很好！

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

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

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

我在这个谷歌文档中看到它显示将 styles 应用到 'googlemap' 与 'setMapStyle()' 但这不是 angular ZEFE90A8E604A7C840E88D03A67F6B7 中的方法

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

 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: [...]
  };

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