如何更改 angular google 地图上的集群图标?

How can I change cluster icon on angular google maps?

我正在使用 angular google 地图,我正在尝试使用集群功能,但它不起作用,也许你们中的一些人可以给我提示。

这是一个 fiddle 工作但它使用默认的 google 集群图像(黄色,蓝色和红色集群),你可以看到 3 个标记,如果你缩小缩放你会看到群集。

http://jsfiddle.net/5ya0svjs/11/

$scope.clusterOpt = {
        calculator: function(){
            return { index: 1 , text: "HERE DUDE, CAN U SEE?", title:"Please help me guys"};
        },
        styles: [
            {
                url: "mypath/anyImage.png",
                width: 63
            }
        ],
        averageCenter: true
    };

我想自定义它,所以我根据群集上的标记数量将计算器功能添加到 return 我自己的图像之一。但是当我这样做时,集群在地图的顶部,而不是它应该在的位置,我尝试设置 avarege 属性 和锚点 属性 但两者都无法解决这个错误。

在这个 fiddle 中,您可以看到计算器功能,return对于只有 1 个 makericoncluster 的样式数组,总是 1(特定于 bug)。 当您缩小缩放时,您将看不到它应该在的位置的集群,但您会在地图顶部看到它,我也没有放图像,我只写了一个文本 "Here dude...")(具体来说错误)。有人可以帮助我吗?

(如果你点击标记,那只是一个 "here dude, can u see?" 你将被放置在标记所在的位置)

这是我的Fiddle

集群样式的width(和height)属性不会缩放图像,它们会裁剪图像。所以在这个例子中你只会得到图像的裁剪部分(这是空的)。

使用CSS缩放图像,例如通过

.angular-google-map-container .cluster img {
  width:63px;
  height:93px;
}

工作fiddle:http://jsfiddle.net/5ya0svjs/30/