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

Question

我正在使用谷歌地图角度组件，它运行得很好！

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

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

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

我在这个谷歌文档中看到，它显示了用"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幻灯片，可以逐渐删除它们，然后只导出样式数组(。