如何更改角度Google地图上的群集图标？

Question

我正在使用角度Google地图，并且正在尝试使用群集功能，但它无法正常工作，也许您中的一些人可以给我提示。

这是一个小提琴作品，但是使用默认的Google群集图像（黄色，蓝色n红色群集），您可以看到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
    };

我想对其进行自定义，所以我添加了计算器功能以根据群集上的标记数量返回自己的图像之一。 但是，当我执行此操作时，群集位于地图的顶部，而不是应位于的位置，因此我尝试设置avarege属性和anchor属性，但两者都无法解决此错误。

在这个小提琴中，您可以看到计算器函数，对于仅包含1个makericoncluster的styles数组，总是返回1（具体说明该错误）。 当您减小缩放比例时，您不会看到群集应在的位置，但是您会在地图的顶部看到它，我也没有放置图像，我只写了一个文字“ Here dude ...”）（特定于该错误）。 有人可以帮我吗？

（如果您单击标记，那只会是“伙计，您可以看到吗？”您将被放置在标记所在的位置）

这是我的小提琴

Answer 1

群集样式的width （和height ）属性不会缩放图像，它们会裁剪图像。 因此，在该示例中，您只会得到图像的裁剪部分（为空）。

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

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

工作提琴： http : //jsfiddle.net/5ya0svjs/30/