Question

问题：

您好，

我需要帮助用计算器实现MarkerCluster。基本上我需要在群集中对一些标记进行分组，并使用函数Calculator在每个标记中动态显示图像和文本。

实际上我的地图有效，我展示了Markes和一些Clusters，但我无法配置MapOptions来确定群集的最小大小，我可以使用Calculator根据我的值来配置这些图像。

要表示我的实际情况和我需要的内容，请参阅此图片：https://ibb.co/cqkG8S

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

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

所以我的问题是：

1）如何设置计算器 2）如何设置集群选项

感谢任何帮助！

我的代码：

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

#include <stdio.h>
#include <stdlib.h>
#include <string.h>
#include <fcntl.h>
#include <errno.h>
#include <sys/ioctl.h>
#include <sys/types.h>
#include <sys/time.h>
#include <sys/mman.h>
#include <linux/videodev2.h>
#include "/usr/include/libv4l2.h" // I am using ubuntu, so pointing to this location

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

<agm-map [latitude]="lat" [longitude]="lng" [zoom]="zoom">
    <agm-marker-cluster [styles]="clusterStyles" >
        <agm-marker *ngFor="let marker of markers" [latitude]="marker.latitude" [longitude]="marker.longitude"></agm-marker>
    </agm-marker-cluster>
</agm-map>

版本

棱角分明 - 5.2.6 agm core - 1.0.0-beta.2 agm js-marker-clusterer - 1.0.0-beta.2

Answer 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,
        }

希望有帮助！

发布以来已经有一段时间了，所以也许您已经知道了，但是我还是添加了这个答案，以防其他人寻找如何配置它的情况。

Angular2 + Angular Google Maps - 配置地图群集和群集选项

1 个答案: