时间戳

首页 > 解决方案 > 如何使用谷歌地图角度组件从谷歌地图中删除地标

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

问题描述

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

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

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

  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>

标签： javascriptangulargoogle-mapsgoogle-maps-api-3

解决方案

尝试使用MapOptions 接口的样式属性。像这样：

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

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

推荐阅读