如何知道agm中marker clustering上聚類的marker信息

Question

我想了解在 AGM 谷歌地圖中標記聚類下分組的標記信息。

<agm-map #agmMap [latitude]="latitude" [longitude]="longitude" [zoom]="zoomMap" [fitBounds]="true"
         (boundsChange)="checkMarkersInBounds($event)" [scrollwheel]="null">
  <agm-marker-cluster [maxZoom]="maxZoom" [gridSize]="50" [averageCenter]="true"
                      imagePath="https://raw.githubusercontent.com/googlearchive/js-marker-clusterer/gh-pages/images/m">
    <agm-marker *ngFor="let data of mapArrayListAccordingParams;let i=index" [latitude]="data.latitude"
                [longitude]="data.longitude" [agmFitBounds]="true" [gestureHandling]="cooperative"
                (markerClick)="clickedMarker(infowindow,data);selectedEmp = data;newSelectedEmp.push(data)">
    </agm-marker>
  </agm-marker-cluster>
</agm-map>

這是我用於聚類的代碼，我想知道關於聚類在一組下的每個標記的信息。

Answer 1

好的：）我終於找到了解決方案。 所以，這里是答案：

創建一個指令，您將使用它來代替agm-marker-cluster

我的被命名為ct-marker-cluster

而我們需要的是改變 clusterclick 的默認行為。

我已經刪除了默認處理程序。

並添加了一個新的：

    this._clusterManager
      .getClustererInstance()
      .then((markerClusterer: MarkerClusterer) => {
        google.maps.event.addListener(
          markerClusterer,
          'clusterclick',
          (cluster) => {
            this.clusterClick.emit(cluster);
          }
        );
      });

然后，在您的模板中將$event參數傳遞給clusterClick事件： <ct-marker-cluster (clusterClick)="onClusterClick($event)">

最后：

onClusterClick(cluster: Cluster): void {
    cluster.getMarkers().map((marker: google.maps.Marker) => {
        console.log(marker);
        return marker.getZIndex(); // I needed to select zIndex only
    });
}

該指令的完整源代碼可以在下面找到：

import {
  Directive,
  EventEmitter,
  Input,
  OnChanges,
  OnDestroy,
  OnInit,
  Output,
  SimpleChange,
} from '@angular/core';

import { Subscription } from 'rxjs';

import { InfoWindowManager, MarkerManager } from '@agm/core';
import {
  ClusterIconStyle,
  MarkerClustererOptions,
} from '@google/markerclustererplus';
import { Calculator } from '@google/markerclustererplus/dist/markerclusterer';
import { ClusterManager } from '@agm/markerclusterer';
import MarkerClusterer from '@google/markerclustererplus';
import { Cluster } from '@google/markerclustererplus/dist/cluster';

@Directive({
  selector: 'ct-marker-cluster',
  providers: [
    ClusterManager,
    { provide: MarkerManager, useExisting: ClusterManager },
    InfoWindowManager,
  ],
})
export class CtMarkerCluster
  implements OnDestroy, OnChanges, OnInit, MarkerClustererOptions
{
  /**
   * The grid size of a cluster in pixels
   */
  @Input() gridSize: number;

  /**
   * The maximum zoom level that a marker can be part of a cluster.
   */
  @Input() maxZoom: number;

  /**
   * Whether the default behaviour of clicking on a cluster is to zoom into it.
   */
  @Input() zoomOnClick: boolean;

  /**
   * Whether the center of each cluster should be the average of all markers in the cluster.
   */
  @Input() averageCenter: boolean;

  /**
   * The minimum number of markers to be in a cluster before the markers are hidden and a count is shown.
   */
  @Input() minimumClusterSize: number;

  /**
   * An object that has style properties.
   */
  @Input() styles: ClusterIconStyle[];

  /**
   * A function that calculates the cluster style and text based on the markers in the cluster.
   */
  @Input() calculator: Calculator;

  @Input() imagePath: string;
  @Input() imageExtension: string;

  /**
   * The name of the CSS class defining general styles for the cluster markers.
   * Use this class to define CSS styles that are not set up by the code that
   * processes the `styles` array.
   *
   * @defaultValue 'cluster'
   */
  @Input() clusterClass: string;

  /**
   * Whether to allow the use of cluster icons that have sizes that are some
   * multiple (typically double) of their actual display size. Icons such as
   * these look better when viewed on high-resolution monitors such as Apple's
   * Retina displays. Note: if this property is `true`, sprites cannot be used
   * as cluster icons.
   *
   * @defaultValue false
   */
  @Input() enableRetinaIcons: boolean;

  /**
   * Whether to ignore hidden markers in clusters. You may want to set this to
   * `true` to ensure that hidden markers are not included in the marker count
   * that appears on a cluster marker (this count is the value of the `text`
   * property of the result returned by the default `calculator`). If set to
   * `true` and you change the visibility of a marker being clustered, be sure
   * to also call `MarkerClusterer.repaint()`.
   *
   * @defaultValue false
   */
  @Input() ignoreHidden: boolean;

  /**
   * An array of numbers containing the widths of the group of
   * `<imagePath><n>.<imageExtension>` image files. (The images are assumed to
   * be square.)
   *
   * @defaultValue [53, 56, 66, 78, 90]
   */
  @Input() imageSizes: number[];

  /**
   * The tooltip to display when the mouse moves over a cluster marker.
   * (Alternatively, you can use a custom `calculator` function to specify a
   * different tooltip for each cluster marker.)
   *
   * @defaultValue ''
   */
  @Input() title: string;

  @Output() clusterClick: EventEmitter<Cluster> = new EventEmitter<Cluster>();

  private _observableSubscriptions: Subscription[] = [];

  constructor(private _clusterManager: ClusterManager) {}

  ngOnDestroy() {
    this._clusterManager.clearMarkers();
    this._observableSubscriptions.forEach((s) => s.unsubscribe());
  }

  ngOnChanges(changes: { [key: string]: SimpleChange }) {
    if (changes['gridSize']) {
      this._clusterManager.setGridSize(changes['gridSize'].currentValue);
    }
    if (changes['maxZoom']) {
      this._clusterManager.setMaxZoom(changes['maxZoom'].currentValue);
    }
    if (changes['zoomOnClick']) {
      this._clusterManager.setZoomOnClick(changes['zoomOnClick'].currentValue);
    }
    if (changes['averageCenter']) {
      this._clusterManager.setAverageCenter(
        changes['averageCenter'].currentValue
      );
    }
    if (changes['minimumClusterSize']) {
      this._clusterManager.setMinimumClusterSize(
        changes['minimumClusterSize'].currentValue
      );
    }
    if (changes['imagePath']) {
      this._clusterManager.setImagePath(changes['imagePath'].currentValue);
    }
    if (changes['imageExtension']) {
      this._clusterManager.setImageExtension(
        changes['imageExtension'].currentValue
      );
    }
    if (changes['calculator']) {
      this._clusterManager.setCalculator(changes['calculator'].currentValue);
    }
    if (changes['styles']) {
      this._clusterManager.setStyles(changes['styles'].currentValue);
    }
    if (changes['clusterClass']) {
      this._clusterManager.setClusterClass(
        changes['clusterClass'].currentValue
      );
    }
    if (changes['enableRetinaIcons']) {
      this._clusterManager.setEnableRetinaIcons(
        changes['enableRetinaIcons'].currentValue
      );
    }
    if (changes['ignoreHidden']) {
      this._clusterManager.setIgnoreHidden(
        changes['ignoreHidden'].currentValue
      );
    }
    if (changes['imageSizes']) {
      this._clusterManager.setImageSizes(changes['imageSizes'].currentValue);
    }
    if (changes['title']) {
      this._clusterManager.setTitle(changes['title'].currentValue);
    }
  }

  /** @internal */
  ngOnInit() {
    this._clusterManager.init({
      averageCenter: this.averageCenter,
      calculator: this.calculator,
      clusterClass: this.clusterClass,
      enableRetinaIcons: this.enableRetinaIcons,
      gridSize: this.gridSize,
      ignoreHidden: this.ignoreHidden,
      imageExtension: this.imageExtension,
      imagePath: this.imagePath,
      imageSizes: this.imageSizes,
      maxZoom: this.maxZoom,
      minimumClusterSize: this.minimumClusterSize,
      styles: this.styles,
      title: this.title,
      zoomOnClick: this.zoomOnClick,
    });

    this._clusterManager
      .getClustererInstance()
      .then((markerClusterer: MarkerClusterer) => {
        google.maps.event.addListener(
          markerClusterer,
          'clusterclick',
          (cluster) => {
            this.clusterClick.emit(cluster);
          }
        );
      });
  }
}

Answer 2

這是答案，

在您的添加屬性 minimumClusterSize 中，只會顯示您的集群。

要做的步驟：

1. 安裝 npm 安裝@agm/js-marker-clusterer --save

2. 在你的 app.module.ts 中導入模塊

   從'@agm/js-marker-clusterer'導入{AgmJsMarkerClustererModule}；

    imports: [ BrowserModule, AgmCoreModule.forRoot({ apiKey: ['YOUR_API_KEY_HERE'] }), AgmJsMarkerClustererModule

   ]

3. 在 app.component.html

<agm- map style="height: 300px" [latitude]="51.673858" [longitude]="7.815982"> <agm-marker-cluster [minimumClusterSize]= "minclusterSize" imagePath="https://raw.githubusercontent. com/googlemaps/v3-utility-library/master/markerclustererplus/images/m"> <agm-marker [latitude]="51.673858" [longitude]="7.815982"> </agm-map

4. 在 app.component.ts 中

declare minclusterSize = 0 //default 0. 例如：如果你想將以上 3 個位置聚類，你需要將值更改為 3。