Angular2+ Angular Google Maps - 配置地图集群、计算器和选项

Posted 2023-03-28

【中文标题】Angular2+ Angular Google Maps - 配置地图集群、计算器和选项

【英文标题】：Angular2+ Angular Google Maps - Configure Map Clusters, Calculator and Options

【发布时间】：2018-08-18 12:15:57

【问题描述】：

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

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

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

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

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

所以我的问题是：

如何使用计算器 如何设置 ClustersOptions

感谢您的帮助！

我的代码：

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

我的组件的重要部分（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

【问题讨论】：

您找到适合您的答案了吗？

【参考方案1】：

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

要使用您的计算器功能，如documented here，您需要指定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,
        

希望对您有所帮助！

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