@angular/google-maps 标记和集群动画答案

【问题标题】：@angular/google-maps Marker and Cluster Animation@angular/google-maps 标记和集群动画
【发布时间】：2022-06-17 17:30:28
【问题描述】：

我正在使用 Angular 的 Google 地图库 (@angular/google-maps: 13.3.4)，并且希望在添加标记时以与标记相同的方式为集群设置动画。到目前为止，这是我的代码：

<google-map height="400px"
            width="750px"
            [center]="center"
            [zoom]="zoom"
            >
  <map-marker-clusterer [zoomOnClick]="true" [imagePath]="markerClustererImagePath">
    <map-marker *ngFor="let markerPosition of markerPositions"
                [options]="markerOptions"
                [position]="markerPosition"
    ></map-marker>
  </map-marker-clusterer>
</google-map>

<button (click)="addSingleMarker($event)">Add new Marker</button>

<button (click)="addMarkerToCluster($event)">Add new Cluster</button>

组件.ts：

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  center = { lat: 24, lng: 12 };
  zoom = 4;

  markerPositions = [
    { lat: 24, lng: 12 },
    { lat: 24, lng: 12 },
    { lat: 15, lng: 6 },
  ];

  markerOptions: google.maps.MarkerOptions = {
    animation: google.maps.Animation.DROP
  };

  markerClustererImagePath =
    'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m';

  public addMarkerToCluster($event: google.maps.MapMouseEvent) {
    if ($event.latLng !== null) {
      this.markerPositions.push({ lat: 24, lng: 12 });
    }
  }

  public addSingleMarker($event: google.maps.MapMouseEvent) {
    if ($event.latLng !== null) {
      this.markerPositions.push({ lat: 21, lng: 2 });
    }
  }
}

如果有人可以帮助我，我会很高兴。

【问题讨论】：

标签： google-maps-markers angular-google-maps

【解决方案1】：

不确定是否有合适的方法，但会分享我的解决方案，在我的情况下效果很好：

<map-marker-clusterer 
    #markerCluster  
    >
        <map-marker 
        *ngFor="let marker of markers" 
        [position]="marker.coordinates"
        [options]="marker.options"
        >
        </map-marker>
      
    </map-marker-clusterer>

为集群添加#markerCluster标签，而不是在集群通过ViewChild setter初始化后立即将其分配给变量：

  @ViewChild('markerCluster') set markerCluster(cluster: MapMarkerClusterer) {
    if (!cluster) return;
    this.cluster = cluster;
  }

现在您有了 MapMarkerClusterer 对象，您可以通过到达this.cluster.markerClusterer.getClusters() 来在其上做一些动画

this.cluster.markerClusterer.getClusters()中的每个集群都有div_，所以你可以在特定的集群div上添加css动画类。

【讨论】：