如何使用谷歌 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 數組）。