2

我需要帮助来实现带有计算器功能的 MarkerCluster。基本上我需要在一个集群中分组一些标记，并使用计算器在每个标记中动态显示图像和文本。

实际上我的地图有效，我显示了标记和一些集群，但我无法配置MapOptions以确定集群的最小大小，并且我无法让我的计算器功能根据我的值配置图像。

为了代表我的实际情况和我的需要，请看这张图片：https ://ibb.co/cqkG8S

替换原始标记图像的图像除以 2 个正方形，第一个（绿色）是元素的计数，第二个（蓝色或红色）表示有问题的元素（有问题的集群显示红色正方形）。

在同一张图片中，我有没有被我的图片替换的谷歌原始标记。在这种情况下，我相信 ClusterOptions 没有配置。

所以我的问题是：

  1. 如何使用计算器
  2. 如何设置 ClustersOptions

谢谢你的帮助！

我的代码：

  1. 我的地图声明（map.component.html）：

    <agm-map [latitude]="lat" [longitude]="lng" [zoom]="zoom"> <agm-marker-cluster [styles]="clusterStyles" > <agm-marker *ngFor="let marker标记数" [latitude]="marker.latitude" [longitude]="marker.longitude">

  2. 我的组件的重要部分（map.component.ts）

    导出类 MapComponent 实现 OnInit {

     @Input('markers') markers: MapMarker[];

 clusterStyles: ClusterStyle[];
 clusterOptions: ClusterOptions;

 constructor() { }

 ngOnInit(){
     this.clusterStyles = [
         {
             textColor: "#FFFFFF",
             url: "assets/markers/marker1.png",
             height: 36,
             width: 58
         },
         {
             textColor: "#FFFFFF",
             url: "assets/markers/marker2.png",
             height: 36,
             width: 58
         }
     ];

     this.clusterOptions = {
         gridSize: 60,
         minimumClusterSize: 2,
         averageCenter: true
     }
 }

 //Calculate Function - to show image em formatted text
 calculateFunction(markers: MapMarker[], numStyle: number){

     let index: number = 0
     let title: string = "";
     let text: string = "<div style=\"position: relative; top: -4px; text-align: center; margin: 0px auto; width: 60px;\"> <div style=\"display: inline-block; width: 29px;\">{{ELEMENTS}}</div><div style=\"display: inline-block; width: 29px;\">{PROBLEMS}</div></div>";
     let qtdNodes: number = 0;
     let qtdEvents: number = 0;

     for(let i of markers){
         qtdNodes += i.qtdEvents;
         qtdEvents += i.qtdEvents;
     }

     index = (qtdEvents == 0) ? 1 : 2;

     text = text.replace( "{ELEMENTS}", qtdNodes.toString() );
     text = text.replace( "{PROBLEMS}", qtdEvents.toString() );

     return {
         text: text,
         index: index,
         title: title
     }
 }

    }

版本

角度 - 5.2.6 agm 核心 - 1.0.0-beta.2 agm js-marker-clusterer - 1.0.0-beta.2

4

1 回答 1

0

在您的 HTML 中，您需要配置您的agm-marker-cluster实例。

要使用此处记录的计算器功能，请指定calculator属性：

    <agm-marker-cluster [calculator]="calculateFunction">

要设置集群的最小大小，请使用该minimumClusterSize属性。

所以这会给你一个像这样的组件调用：

    <agm-marker-cluster 
        [calculator]="calculateFunction"
        [minimumClusterSize]="clusterOptions.minimumClusterSize"
        [styles]="clusterStyles">
      <agm-marker>
        ...
      </agm-marker>
    </agm-marker-cluster>

最后，在您的 中calculateFunction，您可以正确处理传入的参数，但您可以title在返回对象中省略 。所以你可以像这样返回：

        ... 

        return {
            text: text,
            index: index,
        }

希望这会有所帮助！

自从您发布以来已经有一段时间了，所以也许您已经弄清楚了，但是我仍然添加了这个答案，以防其他人来寻找如何配置它。

于 2020-10-13T19:01:43.507 回答