agm-marker-cluster 缩放后不显示标记

发布于 2025-01-16 19:13:39 字数 1019 浏览 1 评论 0原文

我有这个部分用于在带有自定义聚类图像的地图上聚类标记：（

   <agm-marker-cluster
  *ngFor="let item of clusters | keyvalue"
  imagePath="/assets/img/assets-cluster/a"
>
  <agm-marker
    *ngFor="let marker of item.value"
    [latitude]="marker.wkt.coordinates[1]"
    [longitude]="marker.wkt.coordinates[0]"
    [iconUrl]="{
      url: './assets/img/asset-type-icons/default.svg',
      scaledSize: { width: 20, height: 20 }
    }"
  >
    >
    <agm-info-window [disableAutoPan]="true">
      <a [routerLink]="[]" (click)="goToUrl(marker.clickUrl)">{{
        marker.name
      }}</a>
    </agm-info-window>
  </agm-marker>
</agm-marker-cluster>

在本示例中，标记图标是静态的，在我的原始代码中，它是动态的并且来自 url - 但我得到了相同的结果）

问题是当地图加载时，我会看到图标一秒钟（因此它已加载并可访问），但一旦出现集群（使用自定义图像），我可以放大集群 - 但它永远不会分解为标记。我只会看到其中有数字的聚类圆圈。

我的问题是：是什么阻止簇分解成标记？

原文

I have this section for clustering markers on a map with a custom cluster image:

   <agm-marker-cluster
  *ngFor="let item of clusters | keyvalue"
  imagePath="/assets/img/assets-cluster/a"
>
  <agm-marker
    *ngFor="let marker of item.value"
    [latitude]="marker.wkt.coordinates[1]"
    [longitude]="marker.wkt.coordinates[0]"
    [iconUrl]="{
      url: './assets/img/asset-type-icons/default.svg',
      scaledSize: { width: 20, height: 20 }
    }"
  >
    >
    <agm-info-window [disableAutoPan]="true">
      <a [routerLink]="[]" (click)="goToUrl(marker.clickUrl)">{{
        marker.name
      }}</a>
    </agm-info-window>
  </agm-marker>
</agm-marker-cluster>

(In this example the marker icon is static, in my original code it is dynamic and comes from a url - but I get the same result)

The problem is that when the map loads I see the icon for a second (so it is loaded and accessible) but once the clusters appear (with the custom image) I can zoom in to a cluster - but it will never break into markers. I'll just see the cluser circle with the number in it.

My question is: What is keeping the clusters from breaking into markers?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

魂牵梦绕锁你心扉 2025-01-23 19:13:39

为您的集群器指定最小集群大小。

<agm-marker-cluster
  minimumClusterSize= "5"
  *ngFor="let item of clusters | keyvalue"
  imagePath="/assets/img/assets-cluster/a"
>
  <agm-marker
    *ngFor="let marker of item.value"
    [latitude]="marker.wkt.coordinates[1]"
    [longitude]="marker.wkt.coordinates[0]"
    [iconUrl]="{
      url: './assets/img/asset-type-icons/default.svg',
      scaledSize: { width: 20, height: 20 }
    }"
  >
    >
    <agm-info-window [disableAutoPan]="true">
      <a [routerLink]="[]" (click)="goToUrl(marker.clickUrl)">{{
        marker.name
      }}</a>
    </agm-info-window>
  </agm-marker>
</agm-marker-cluster>

give your clusterer a minimum cluster size.

<agm-marker-cluster
  minimumClusterSize= "5"
  *ngFor="let item of clusters | keyvalue"
  imagePath="/assets/img/assets-cluster/a"
>
  <agm-marker
    *ngFor="let marker of item.value"
    [latitude]="marker.wkt.coordinates[1]"
    [longitude]="marker.wkt.coordinates[0]"
    [iconUrl]="{
      url: './assets/img/asset-type-icons/default.svg',
      scaledSize: { width: 20, height: 20 }
    }"
  >
    >
    <agm-info-window [disableAutoPan]="true">
      <a [routerLink]="[]" (click)="goToUrl(marker.clickUrl)">{{
        marker.name
      }}</a>
    </agm-info-window>
  </agm-marker>
</agm-marker-cluster>

回复收藏 0 原文

~没有更多了~